【uniapp】小程序中input输入框的placeholder-class不生效以及解决办法

一、问题描述:

  • input框中的placeholder属性是可以更改样式,更改的方式为placeholder-class="你的style名"

example:

<view class="top_one">
      <text>姓名</text> 
      <input type="text" placeholder="请输入姓名" placeholder-class="placeholder_class"/> //(注释)这里---- placeholder_text
</view>
<view class="top_two">
    <text>手机号码</text><input type="number" placeholder="手机号" />
</view>
<style>
     .placeholder_class {
        font-family: 'Source Han Sans CN';
        font-weight: 350;
        font-size: 24rpx;
        color: #747474;
     }
</style>

二、解决办法:

  • 但是这个属性如果使用了<style scoped>就不生效,所以我们可以单独再写一个style:
<style>
    .placeholder-class {
        color: #BFBFBF;
    }
</style>
<style scoped lang="scss">
    .placeholder-class {
        color: #BFBFBF;
    }
</style>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容