当前位置:首页 >> 编程语言 >> 【uniapp】小程序中input输入框的placeholder-class不生效解决办法,电商老a

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

cpugpu芯片开发光刻机 编程语言 2
文件名:【uniapp】小程序中input输入框的placeholder-class不生效解决办法,电商老a 【uniapp】小程序中input输入框的placeholder-class不生效解决办法 问题描述

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>

记录一下。。 

协助本站SEO优化一下,谢谢!
关键词不能为空
同类推荐
«    2025年12月    »
1234567
891011121314
15161718192021
22232425262728
293031
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
搜索
最新留言
文章归档
网站收藏
友情链接