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

马肤
这是懒羊羊

问题描述

uniapp微信小程序,使用input组件时,想要改变提示词 placeholder 的样式,但是使用placeholder-class 改变不了

(图片来源网络,侵删)

如下:


    .placeholder_class{
      font-size: 26rpx;
    }

问题分析 

如果你在使用`scoped`属性时无法改变`placeholder`的样式,可能是由于样式的优先级问题。在CSS中,选择器的优先级是根据其特定性和声明顺序来确定的。当多个选择器具有相同的特定性时,后面声明的样式会覆盖前面的样式。

(图片来源网络,侵删)

解决方案

方法一:去掉scope

为了避免影响我的其他代码,所以还是要使用scoped,我们可以单独再写一个style

   //原本其他的css样式


   .placeholder_class{
      font-size: 26rpx;
    } 
方法二:使用deep选择器

deep选择器用于穿透组件的作用域,将样式应用于子组件的元素。它的作用是使得样式选择器的范围扩大到子组件内部,以便修改子组件的样式。

    /deep/ .placeholder_class{
      font-size: 26rpx;
    } 

记录一下。。 


文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复:表情:
评论列表 (暂无评论,0人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码