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

本文介绍: 在CSS中，选择器的优先级是根据其特定性和声明顺序来确定的。当多个选择器具有相同的特定性时，后面声明的样式会覆盖前面的样式。选择器用于穿透组件的作用域，将样式应用于子组件的元素。它的作用是使得样式选择器的范围扩大到子组件内部，以便修改子组件的样式。uniapp 微信小程序，使用 input 组件时，想要改变提示词 placeholder 的样式，但是使用。如果你在使用`scoped`属性时无法改变`place h old e r`的样式，可能是由于。

问题 描述

uniapp 微信小程序，使用input 组件时，想要改变提示词 place h old e r 的样式，但是使用place h old e r–class 改变不了

如下：

&lt;input type="text" placeholder="搜索" placeholder-class="placeholder_class"&gt;

<style lang="less" scoped&gt;
    .placeholder_class{
      font-size: 26rpx;
    }
</style&gt;

问题 分析

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

解决方案

方法一：去掉 scope

为了避免影响我的其他代码，所以还是要使用scoped，我们可以单独再写一个 style
<style lang="less" scoped&gt;
   //原本其他的css样式
</style>
<style>
   .placeholder_class{
      font-size: 26rpx;
    } 
</style>

方法二：使用deep 选择器

deep选择器用于穿透组件的作用域，将样式应用于子组件的元素。它的作用是使得样式选择器的范围扩大到子组件内部，以便修改子组件的样式。
<style lang="less" scoped>
    /deep/ .placeholder_class{
      font-size: 26rpx;
    } 
</style>