在 input 的 placeholder中 使用iconfont
写在前面
产品要求放大镜和文字放在一起。用定位,位置不准确,就会导致手机上错位,丑的一批。
进入正题 如何在input的 placeholder 中使用图标呢?
以阿里巴巴的矢量图标库为例, 现在有三种引入方式 Unicode 、 Font class 、 Symbol(为了多色)。
我们现在引入方式是Font class 、 Symbol两种同时使用,Symbol仅仅是为了多色图标。又啰嗦了,进入正题进入正题。
注意要加图标类名 比如 iconfont
1、Unicode方式
<input type="text" class="iconfont search" placeholder=''>
2、通过vue的bind 注意把&#x改成 \u
<input type="text" class="iconfont search" :placeholder='"\ue65a"'>
2、Font class方式
同上不过是从伪类的content里面拿到 例如 \e7bc 变成 \ue7bc 多一个u,同样是bind
<input type="text" class="iconfont search" :placeholder='"\ue7bc"'>
写在最后
产品真是操蛋
在 input 的 placeholder中 使用iconfont的更多相关文章
- input修改placeholder中颜色和字体大小
input::-webkit-input-placeholder { /* placeholder颜色 */ color: #aab2bd; /* placeholder字体大小 */ font-si ...
- 鼠标点击input时,placeholder中的提示信息消失
html代码: <input type="text" placeholder="多个关键词空格隔开"> 鼠标点击input时,placeholder ...
- 四、Input框改placeholder中字体的颜色
Input框改placeholder中字体的颜色 input::-webkit-input-placeholder { color: #ccc; font-size: 12px; }
- vue之placeholder中引用字体图标
先说一下问题:在placeholder中想使用字体图标,结果渲染不正确,代码如图 效果如图 在网上get到了解决方法: 在VUE组件中,给placeholder添加图标,需要注意以下几点: 1.不要给 ...
- css系列:input的placeholder在safari下设置行高失效
在项目中遇到input的placeholder在safari下设置行高失效的问题,问度娘后未得治原因,倒是有解决办法: 方法一:使用padding使提示文字居中,如果font-size:14px,UI ...
- 在safari下input的placeholder设置行高失效
在项目中遇到input的placeholder在safari下设置行高失效的问题,亲测 input{ width:250px; height:30px; line-height:30px; font- ...
- 关于placeholder中 文字添加换行 用转义字符 代替<br>
今天遇到一个问题 UI给的效果图中 文本域的提示文字 是两行显示, 于是就想到placeholder中能否解析html标签, 尝试后发现并无卵用, 经过调查后发现 可以用转义字符代替<br> ...
- input 的 placeholder属性在IE8下的兼容处理
placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...
- 设置input的placeholder样式
自定义input默认placeholder样式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 inpu ...
随机推荐
- 统计所有小于非负整数 n 的质数的数量,埃拉托斯特尼筛法
素数的定义:质数又称素数.一个大于1的自然数,除了1和它自身外,不能被其他自然数整除的数叫做质数. 1.暴力算法: 令i=2; 当i<n的时候,我们循环找出2-i的质数,即让i%(2~i-1), ...
- 锐浪报表 Grid++Report 一维码无法固定条形码打印宽度
使用过 锐浪报表的 程序员 都知道,功能很强大,确实带来了很多便利,但今天发现一个问题,关于一维码的条形码无法固定宽度: 打印相差了0.07毫米,居然差别这么大, 打印出来的条码,要么太宽,要么太窄 ...
- python3 投票
import urllib.request # cd C:\Python36-32\Scripts # pip install BeautifulSoup from bs4 import Beauti ...
- go构造函数
go构造函数 结构体没有构造函数,你可以创建一个函数返回一个相应类型的实例代替(类似一个工厂): func NewSaiyan(name string, power int) *Saiyan { re ...
- PHP ftp_get_option() 函数
定义和用法 The ftp_get_option() 函数返回 FTP 连接的各种运行时选项. 语法 ftp_get_option(ftp_connection,option) 参数 描述 ftp_c ...
- DNS域名服务器的搭建
父域的DNS(svr7): 可以解析父域名下保存的域名地址,即解析.tedu.cn下的域名 一.安装软件包bind.bind-chroot bind是DNS解析服务需要用到的服务软件包,bind- ...
- 三:robotframework框架配合selenium之jquery定位
RF框架我用的比较多,限于自己的代码水平,目前工作中一直是用RF框架.unittest框架,我也练习了很久,还差一点封装的技巧与设计模式的学习.所以不敢在项目中实践. 等明年我的代码水平再上升一个台阶 ...
- 24、echarts做报表
1.今天就来讲一讲echarts的使用 使用步骤 (1)首先需要下载包echarts.js,然后引入该包, <!DOCTYPE html> <html> <header& ...
- linux 查看cpu,memory
https://www.cnblogs.com/ctypyb2002/p/9792951.html
- SSM项目启动报错:Failed to read candidate component class
SSM项目启动报错:Failed to read candidate component class 换成3.1又没有问题,换成3.2又不行,查看编译环境用的是1.8,将1.8降为1.7,问题解决,服 ...