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

问题描述

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

如下:

html 复制代码
<input type="text" placeholder="搜索" placeholder-class="placeholder_class">

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

问题分析

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

解决方案

方法一:去掉scope

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

css 复制代码
<style lang="less" scoped>
   //原本其他的css样式
</style>
<style>
   .placeholder_class{
      font-size: 26rpx;
    } 
</style>
方法二:使用deep选择器

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

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

记录一下。。

相关推荐
丁总学Java1 分钟前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
说私域1 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8681 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165022 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
尚梦9 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小白白一枚11113 小时前
css实现div被图片撑开
前端·css
@蒙面大虾13 小时前
CSS综合练习——懒羊羊网页设计
前端·css
paopaokaka_luck14 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节