問題描述

uniapp微信小程序，使用input組件時，想要改變提示詞 placeholder 的樣式，但是使用placeholder-class 改變不了

如下：

<input type="text" placeholder="搜索" placeholder-class="placeholder_class"><style lang="less" scoped>.placeholder_class{font-size: 26rpx;}
</style>

問題分析?

如果你在使用`scoped`屬性時無法改變`placeholder`的樣式，可能是由于樣式的優先級問題。在CSS中，選擇器的優先級是根據其特定性和聲明順序來確定的。當多個選擇器具有相同的特定性時，后面聲明的樣式會覆蓋前面的樣式。

解決方案

方法一：去掉scope

為了避免影響我的其他代碼，所以還是要使用scoped，我們可以單獨再寫一個style

<style lang="less" scoped>//原本其他的css樣式
</style>
<style>.placeholder_class{font-size: 26rpx;} 
</style>

方法二：使用deep選擇器

deep選擇器用于穿透組件的作用域，將樣式應用于子組件的元素。它的作用是使得樣式選擇器的范圍擴大到子組件內部，以便修改子組件的樣式。

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

記錄一下。。?