微信小程序placeholder设置自定义样式

最新推荐文章于 2024-03-10 22:05:20 发布

骑上我心爱的小摩托

最新推荐文章于 2024-03-10 22:05:20 发布

阅读量4.5k

点赞数

分类专栏：微信小程序前端文章标签：微信小程序

本文链接：https://blog.csdn.net/cxwtsh123/article/details/81170432

版权

前端同时被 2 个专栏收录

71 篇文章 0 订阅

订阅专栏

微信小程序

5 篇文章 0 订阅

订阅专栏

1、与一般html不同，这里的input标签内的placeholder样式需要自己设置一个属性值 placeholder-class，再对css进行修饰

<view class='search-rec'>
  <image class='icon-search' src='../../image/icon-search.png'></image>
  <input class='search-input' placeholder='请输入商品名称' placeholder-class="phcolor"></input>
</view>

2、这里的css样式见下：

input.search-input{
  display: inline-flex;
  margin-left: 5px;
  line-height: 17px;
  height: 17px;
  min-height: none;
  margin: 2px 0 2px 5px;
  font-size: 12px;
}
.phcolor{
    font-size: 12px;
    color: #7F7F7F;
  }