微信小程序> 微信小程序自定义placeholder颜色和样式

微信小程序自定义placeholder颜色和样式

浏览量:5436 时间: 来源:怪力马猴烧酒

自定义placeholder颜色和样式

如图,这是微信小程序input组件的官方文档描述,下图红框里的placeholder-styleplaceholder-class就是微信小程序里用来给placeholder设置样式的属性。
小程序

一、使用placeholder-style设置样式

placeholder-style相当于在标签的style属性,可直接在标签内设置。

用法:

input type="text" placeholder="请输入" placeholder-style="color:#e2e2e2;"/input

示例如下:

wxml代码:

input type="text" placeholder="请输入" placeholder-style="color:#000;"/input

wxss代码:

input{  width: 300rpx;  border: 2rpx solid #000;  margin: 50rpx auto;  border-radius:10rpx; }

效果如下:
小程序
如果没有placeholder-style="color:#e2e2e2;"的效果如下,因为微信小程序默认的placeholder样式是和input设置的样式是不一样的,所以提供了placeholder-style,placeholder-class。
小程序

二、使用placeholder-class设置样式

用法:

wxml代码:

input type="text" placeholder="请输入" placeholder-class="placeholderStyle"/input

wxss代码:

.placeholderStyle{  //样式}

示例如下:

wxml代码:

input type="text" placeholder="请输入" placeholder-class="placeholderStyle"/input

wxss代码:

input{  width: 300rpx;  border: 2rpx solid #000;  margin: 50rpx auto;  border-radius:10rpx; }.placeholderStyle{  color:#000;  font-size: 26rpx;}

效果如下:
小程序
可以看到在placeholderStyle类设置的颜色并没有变化。placeholder的颜色只能通过placeholder-style的方式设置。

小程序
小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎