当前位置:   article > 正文

uniapp小程序踩坑input样式问题_uniapp微信小程序 uni-easyinput修改placeholder样式

uniapp微信小程序 uni-easyinput修改placeholder样式

需求:需要给input的placeholder及光标设置特定样式

问题:cursor设置正常展示,但是设置placeholder时使用官方文档提供的属性会有问题

        操作前样式没修改成功,但是输了内容删除之后样式立即生效

  1. <input
  2. class="input"
  3. cursor-color="#fff"
  4. placeholder="搜索内容"
  5. placeholder-style="color: #fff;fontSize: 14px;"
  6. />

解决:直接使用类名,注意style不要加scoped,新写一个,如果还不成功就用深度选择器

  1. <template>
  2. <input
  3. class="input"
  4. cursor-color="#fff"
  5. placeholder="搜索内容"
  6. placeholder-class="placeholder_class"
  7. />
  8. </template>
  9. <style lang="scss">
  10. .placeholder_class {
  11. color: #fff;
  12. font-size: 14px;
  13. }
  14. </style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/830996
推荐阅读
相关标签
  

闽ICP备14008679号