input placeholder 里使用 图标

最新推荐文章于 2023-02-15 15:24:12 发布
最新推荐文章于 2023-02-15 15:24:12 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40890601/article/details/107554288
版权
该博客介绍了如何在layui框架的input placeholder中使用图标。通过添加layui-icon类并插入unicode代码实现，但作者认为这种方法在视觉上不太理想，并表达了修改样式的意向。
摘要由CSDN通过智能技术生成

使用的框架是layui
使用方式是 加入 layui-icon 类， 然后在input 直接使用 unicode 就ok， unicode就是下面这一串代码

<i class="layui-icon">&#xe60c;</i>

在这里插入图片描述

        <input
最低0.47元/天 解锁文章
小k铁柱
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于layui 的input 控件内嵌图标的显示实现
未出笼的菜包的博客
06-01 1万+
登录页实现类似官方模板的输入框内嵌图标的效果 官方模板（参考链接 ： layui 官方出品的单页面后台管理模板系统） 官方文档我找不到关于这类型控件如何实现，然后看到了这个（感谢这位老哥） 参考链接：在input里放入字体图标，如何设置让图标和输入框看起来比较协调 <style> .inputdiv{ display:flex;border: 1px solid #D2D2D2!important;background-color: #f.
input 输入框里边加上小图标的问题
weixin_45677987的博客
10-08 846
<el-autocomplete popper-class="separator-autocomplete" v-model="state" :fetch-suggestions="querySearch" placeholder="搜索" @select="search" class="table-head-search" > <img src="../../images/new-search.png" slot="prepend"> </el.
layui 输入框添加自定义图标
悟世君子的博客
11-14 7645
使用 layui 在输入框里添加自定义图标，layui 官网文档没有提供相关内容，但可以通过下面方式实现 1、准备好要使用的自定义图标 如Iconfont-阿里巴巴矢量图标库https://www.iconfont.cn/ 将下载好的图标放到项目目录 笔者这里下载一张 32×32 的 png 图片 2、自定义 css 属性 .search { background: url(img/search.png) no-repeat 5px cente...
LayUI
w1073459332的博客
03-17 155
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-89o3HGCn-1615965032406)(Pictures/001.png)] Author：Exchanges Version：9.0.1 文章目录一、引言1.1 介绍二、环境搭建2.1 下载2.2 导入依赖三、页面元素3.1 布局3.2 字体图标3.3 按钮3.4 表单3.5 数据表格3.5.1 动态表格3.5.2 分页参数3.5.3 显示工具栏3.5.4 操作按钮3.5.5 操作按钮回调3.6 导航3.7 动画四、
小程序如何在input中的placeholder中加图标
qq_37017864的博客
11-11 6039
小程序如何在input中的placeholder中加图标 方式二可用，方式一不可用， 1.使用mpVue编写小程序代码，首先想到的就是Vue实现的方式， <input :placeholder="placeholdrValue" class="iconfont"> export default { data () { placeholderValue: '/uxe669' ...
layui中日期控件的添加小图标控制日期选择器
qq_46091278的博客
05-10 1716
layui中日期控件的添加小图标控制日期选择器
关于input输入框内设置小图标的问题
weixin_30763455的博客
05-17 6126
其实很简单，只需要html和css就可以搞定啦 首先：<input class="layui-input" id="test1" placeholder="yyyy-MM-dd" type="text" > 写好input标签后就看css大显身手了 #test1{ background-image: url(icon/calendar.png);/*设置小图标为背景*/ ...
Bootstrap3 input输入框插入glyphicon图标的方法
09-02
<input type="text" class="form-control" id="username" name="username" placeholder="用户名" autofocus> ``` 2. **设置图标位置**： 默认情况下，Bootstrap将图标定位在输入框的右侧。如果需要将图标...
bootstrap布局中input输入框右侧图标点击功能
09-02
在Bootstrap布局中，我们经常需要在input输入框的右侧添加一些功能性的图标，例如清除按钮或切换密码可见性的图标。然而，Bootstrap默认情况下，并不直接支持这些图标触发点击事件。这是因为图标通常作为字体图标...
Element Input输入框的使用方法
10-15
本篇文章将深入探讨 `Element Input` 输入框的使用方法。 ### 基础用法 `<el-input>` 组件是最基本的输入框，可以通过 `v-model` 双向绑定数据，`placeholder` 设置占位文本。例如： ```html <el-input v-model=...
微信小程序input框中加入小图标的实现方法
08-27
微信小程序input框中加入小图标的...微信小程序input框中加入小图标的实现方法可以使用image标签和view容器来实现。这种方法可以美化页面，提高用户体验。同时，我们也可以使用css样式来美化页面，提高页面的美观度。
浅谈vux之x-input使用以及源码解读
10-17
x-input组件提供了title属性显示提示信息，placeholder属性设置输入提示文本，required属性表示这个输入框是必填项。自定义校验函数is-type可以通过绑定一个函数来实现，该函数需要返回一个对象，对象中包含valid和...
a-input里的placeholder样式
weixin_35755434的博客
02-15 738
要设置input元素中的placeholder样式，您可以使用以下CSS代码： ::placeholder { color: red; /* 设置占位符文本的颜色 */ font-size: 14px; /* 设置占位符文本的字体大小 */ font-style: italic; /* 设置占位符文本为斜体 */ /* 其他样式属性 */ } 在上面的代码中，::placehol...
layui table edit 编辑模式添加文本框placeholder提示语
椰子园
01-09 7480
先看下效果： layui官方自带的table编辑是这样的 修改之后可以提示用户输入如下所示 假如JS文件table.render()中我们的代码是这样的： {field:'plan_date', title: '计划收款日期', placeholder:'格式：yyyy-mm-dd', edit: 'text', width:150}, 这里我们定义提示语的键名为：‘placeh...
在layui中如何向某单元格里面添加图标
weixin_44484756的博客
07-07 6057
我们接触到的layui表格大多数都是很单调的样式，就比如下面的第一张图片： 现在我就想在供应商的单元格中添加图标，效果图如下： 这种效果是怎么实现的呢？来看一下吧。 在layui表格中有一个很好用的函数，就是done回调函数，在done里面可以接收表格里面所有的数据，可以很方便我们获取值，并且也可以通过done来设置单元格的样式，或者表格的样式也可以用done来实现，那么来看一下done究竟是...
关于如何在placeholder中使用字体图标
qq_45279180的博客
12-08 3482
在placeholder中使用iconfont 今天写页面的时候写到了一个搜索框，要求是随着某个模块滚动来改变宽度和透明度，其中placeholder有个搜索的标志，这种图标一看就知道是字体图标，但是我忘记如何在placeholder中使用字体图标了，我甚至想在js中使用字符串拼接了。。。好了闲话少说，现在说一下如何在placeholder中使用icon font 1.使用iconfont的unicode模式 什么进网站选图标生成项目这里就没必要赘述了，我TM 直接开整奥利给！！！ 首先就是选择U
阿里巴巴iconfont的使用(input的placeholder使用iconfont)
qq_40816649的博客
12-27 3973
最近项目中要用到在input的placeholder中写一个放大镜的图标自然就像到了iconfont  首先到阿里巴巴的iconfont中申请账号并在图标库中创建好项目，然后依照上图的位置上传和下载图标， 下载后的压缩包中的除了demo开头的文件就是我们要的文字图标文件。以上是icontfont的用法 我的项目使用vue写的现在.vue文件中引入压缩包中的css文件 import '...
input标签中添加一个图标
githubcurry
11-27 9317
在input标签中添加一个icon图标基本可以分为两种 1.将icon图标存储为本地图片，然后设置为input的背景图，然后通过background-position来调整图标在输入框的位置 2.使用一个div包裹两个子div，其中第一个div里面包裹icon图标，另一个div包裹input标签，并设置input的border为none，然后让input标签撑满div，设置div的border，然后使用flex布局使两个子div成行排列，并让两个div撑满父div（height，width） 第一种实现方
layui table.reload()
热门推荐
qq_40890601的博客
07-11 2万+
使用table.reload()重载去搜索特定列 html <div class="searchTable" id="searchTable"> <div class="layui-inline"> <input class="layui-input layui-inline" id="badge" placeholder="badge" autocomplete="off" style="display:inline;wi
el-input placeholder
最新发布
08-19
对于el-input组件的placeholder样式设置，可以使用伪类 ::placeholder。可以在.el-input__inner类中使用 ::placeholder来设置placeholder的样式。例如，在CSS中可以这样写： .el-input__inner::placeholder{ color...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值