成果图
iconfont图标不显示
之前在网上搜索placeholder如何显示iconfont图标,网上大部分的答案都是
<input type="text" class="iconfont inp" placeholder="" />
但是这样的话图标根本出不来
如何在input的placeholder中显示图标
我们只需把代码换一换
<input type="text" class="iconfont inp" :placeholder="icon" />
export default {
data(){
return {
icon:'\ue60a 输入商户名、地点'
}
}
};
如何修改iconfont的颜色
在css中加入这行代码就可以修改iconfont的颜色了
input::-webkit-input-placeholder{
color:#b8b8b8;
}
如何缩进input光标位置
.inp {
padding-left:15px;
}
完整代码
template
<input type="text" class="iconfont inp" :placeholder="icon" />
javascript
export default {
data(){
return {
icon:'\ue60a 输入商户名、地点'
}
}
};
style
.inp {
width: 74%;
height: 23px;
margin: auto;
border-radius: 25px;
outline: none;
color: black;
flex: 21;
font-size: 13px;
padding-left:15px;
}
input::-webkit-input-placeholder{
color:#b8b8b8;
}