仿大众点评——解决placeholder中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;
  }