仿大众点评——解决placeholder中iconfont不显示和颜色改变的问题

本文介绍如何在HTML输入框的占位符中正确显示IconFont图标，通过修改代码结构实现图标显示，并提供调整图标颜色的方法。同时，分享了调整输入框光标位置的技巧。

成果图

在这里插入图片描述

iconfont图标不显示

之前在网上搜索placeholder如何显示iconfont图标，网上大部分的答案都是

 <input type="text" class="iconfont inp" placeholder="&#xe60a;" />

但是这样的话图标根本出不来
在这里插入图片描述

如何在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;
  }