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

2023-12-05

问题描述

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>

记录一下。。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 整理 CSS 的最佳方法是什么? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在整理一个以前由不同的人修改过的网站 这是我拥有的页面的骨架 测试 html http pastry se 94064 nav css ht
  • 从 Angular 4 中的 html 中删除主机组件标签

    我有一个表 我想在其中显示一个表行 它是一个组件 我还想将数据传递给该组件 table th td col 1 td td col 2 td td col 3 td th tr tr table
  • HTML - 使用 JS 根据值更改文本颜色

    我正在使用 Django 创建一个以 HTML 形式显示的表格 我想当数字为负数时将数字的颜色更改为红色 当数字为正数时将数字的颜色更改为绿色 我知道我需要使用 JS 来实现这一点 但我无法让它工作 任何帮助将不胜感激 这是我的 Djang
  • 使用多个相互矛盾的 css 文件时的优先顺序

    当在同一页面上使用多个 css 文件并且它们发生冲突时 我如何知道将使用哪一个 例如 如果一个说蓝色主体背景 另一个说红色 快速回答 如果两段 CSS 具有相同的特异性 http web archive org web 2016021005
  • 严格的 DocType 在 FF/Chrome 中强制规定最小表格行高

    我以前从未注意到的事情 但似乎在 Chrome Firefox 可能还有 Opera Safari 我没有专门检查这些 中 使用严格的文档类型可以防止表行显示小于我无法显示的值来确定计算 以下文档在 IE7 中的显示方式与人们想象的一样 所
  • 使用尾随与号 (&) 作为类组合选择器,而不是后代选择器

    我想申请一个班级 highlight到一堆不同的元素并根据元素类型设置它们的样式 我可以这样做 input type text highlight select highlight someOtherSelector hightlight
  • 使用 javascript 设置最大高度

    我有一个 div 这个 div 的最大宽度是用户定义的 我知道我可以使用 element style height 完成它 但这在 IE 中不起作用 关于如何使用 javascript 实现 Firefox 的最大高度等效项有什么想法吗 通
  • Bootstrap 手风琴菜单不起作用

    我设计了一个如图所示的手风琴菜单 如果单击菜单 打开的菜单将关闭 这就是手风琴的功能 但在这个设计中 我逐个单击菜单 但前一个没有关闭 如何解决这个问题 提前致谢 jQuery document ready function var acc
  • 无法删除重叠的框阴影

    更具体地说 我使用的是聚合物纸影 我正在尝试删除一个的两侧paper shadowbox 来创建一个简单的箭头框 但我似乎无法摆脱它 我试过删除position absolute 但这似乎并没有消除重叠的行为 这是我的 html css 的
  • 将自定义字体与 wkhtmltopdf 一起使用

    我正在尝试在使用 wkhtmltopdf 生成的 PDF 中使用自定义字体 我读到您不能使用 google webfonts 并且 wkhtmltopdf 使用 truetype ttf 文件 谁能证实这一点吗 所以我从 google we
  • iPhone 上的 Chrome 溢出空白页面上的内容(仅在新选项卡上,而不是重新加载)

    在 iOS Chrome 上 正文会在没有内容的新选项卡或页面上溢出 但如果重新加载页面 问题就会得到解决 它会给位于底部的任何元素 绝对或固定 带来问题 这是重现问题的代码
  • 边界半径圆

    我有这个代码 span p margin 0 span background color red display inline block border radius 50 span p 25 p p 08 p span 我想在我的跨度上画
  • Li向左浮动,长度动态:最后一行无边框底部

    情况如下 https jsfiddle net rpepf9xs https jsfiddle net rpepf9xs 我想用选择器 nth last child 删除边框底部 但是 如果列表中只有8个 li 则会出现如下错误 ul di
  • 如何观察包含许多 sass 文件的整个目录/文件夹的变化

    我如何跟踪包含许多 sass 文件的整个目录的更改 我正在使用以下命令来观察 sass 的变化 file sass watch style scss style css 但是如何观察包含许多 sass 文件的整个目录 文件夹的变化 只需使用
  • 在导航栏下方添加背景图片

    我想在导航栏下方添加背景图像 具有完整窗口大小的宽度 它不应覆盖整个页面长度 而是从导航栏菜单下方开始 一直向下直到特定的指定高度 但宽度是满的 我参考了以下内容 但仍然没有结果 在 Twitter Bootstrap 中的导航栏下方启动背
  • 如何使用 css 在标题的两侧放置实线? [复制]

    这个问题在这里已经有答案了 可能的重复 如何在标题文本上制作字段集图例样式的 背景线 https stackoverflow com questions 5985009 how can i make a fieldset legend st
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • 如何仅使用CSS设置某个角的边框半径

    如上所示 我可以只给顶部部分而不给底部提供半径 或者有时给底部而不是顶部提供半径吗 有没有办法只给一个角提供边界半径 Like border radius top left top right bottom right bottom lef
  • IE bug:具有不透明背景色的绝对定位元素

    我有一个绝对定位的 DIV 需要捕获 onclick 事件 事实证明 在 IE7 中 DIV 似乎没有诸如单击甚至光标之类的 足迹 例如 div width 200px height 200px position absolute bord
  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red

随机推荐

  • Android中的Banner轮播图的使用

    目录 效果图 介绍 3 XML中banner常用的属性 使用 导入依赖 xml文件 活动代码 本文在碎片中使用 效果图 Banner效果图 介绍 Banner轮播图是一种常见的移动应用界面设计元素 用于展示多张图片或广告 并支持自动切换 它
  • “我,大三,寒假靠Python兼职赚了7567.6元。”

    目前很多同学已经结束期末考试 进入寒假 有很多同学问我 有什么兼职可以线上做的吗 最好还能提高自己的一些技能 以前周末或假期经常去当服务员 导购 发传单之类 最后发现 只是在无畏地消磨自己的时间 对本身技能并不能得到任何提高 所以 不想再重
  • 【王道】计算机组成原理笔记 第四章 指令系统

    前三章讲的分别是概述 运算器和存储器 接下来的第四章和第五章内容都是关于控制器的 我们知道 控制器通过指令来控制计算机 所以这一章介绍指令 下一章介绍控制器如何通过指令来控制计算机 4 1 1 指令格式 1 指令 操作码和地址码 1 1 指
  • linux内核机制之设备树

    设备树 Device Tree 基本概念及作用 在内核源码中 存在大量对板级细节信息描述的代码 这些代码充斥在 arch arm plat xxx和 arch arm mach xxx目录 对内核而言这些platform设备 resourc
  • 视频压缩怎么操作?看完这篇你就知道了

    亲们 你们是否经常为了视频文件过大而烦恼呢 别担心 现在有了视频压缩软件 我们可以轻松解决这个问题 视频压缩软件不仅在日常生活中大放异彩 也在工作和娱乐中发挥着重要的作用 无论是想要分享视频给朋友 还是上传到社交平台或视频网站 视频压缩软件
  • 企业如何为自己的未来做准备?

    如果企业不为未来做准备 就要为出局做准备工作 德鲁克 随着市场需求的不断变化 企业面对着激烈的市场竞争 其该如何为自己的未来做准备 具体企业面临着 建立竞争优势 管理多元化员工队伍 应用新的信息系统与技术 首先 企业在市场竞争中想要建立自己
  • 强化元学习算法在机器人控制中的应用研究

    随着人工智能和机器学习的快速发展 强化学习作为一种重要的机器学习方法 被广泛应用于机器人控制领域 然而 传统的强化学习算法在面对复杂任务和多样化环境时往往需要大量的训练时间和样本 为了解决这个问题 强化元学习算法应运而生 本文将探讨强化元学
  • 微信小程序自定义数据实现级联省市区组件

    前言 在微信小程序中 官方文档提供的省市区组件 可以让用户更加方便快捷地选择省市区 但是官方提供的组件有一个缺点 无法自定义数据 但如果项目中需要使用自己的数据 显然就得寻找其它的组件实现 官方组件 优点 使用官方组件具有稳定性和兼容性 可
  • 137-基于stm32单片机智能保温杯控制装置Proteus仿真+源程序

    资料编号 137 一 功能介绍 1 采用stm32单片机 LCD1602显示屏 独立按键 DS18B20传感器 电机 制作一个基于stm32单片机智能保温杯控制装置Proteus仿真 2 通过DS18b20传感器检测当前保温杯水的温度 并且
  • C++单例模式

    pragma once namespace utility 需要拼接一下命名空间 utility define SINGLETON x friend class utility Singleton
  • 136-基于stm32单片机家庭温湿度防漏水系统设计Proteus仿真+源程序

    资料编号 136 一 功能介绍 1 采用stm32单片机 LCD1602显示屏 独立按键 DHT11传感器 蜂鸣器 制作一个基于stm32单片机家庭温湿度防漏水系统设计Proteus仿真 2 通过DHT11传感器检测当前温湿度 并且显示到L
  • 编程分为哪几种

    前言 编程是一项广泛的技能 涉及到许多不同的编程语言和编程领域 以下是编程的一些常见类型 应用程序开发 开发桌面应用程序 移动应用程序 网络应用程序 游戏等等 例如 Java C C Python Swift Objective C Kot
  • 135-基于stm32单片机超声波非接触式感应水龙头控制系统Proteus仿真+源程序

    资料编号 135 一 功能介绍 1 采用stm32单片机 LCD1602显示屏 独立按键 DHT11传感器 电机 超声波传感器 制作一个基于stm32单片机超声波非接触式感应水龙头控制系统Proteus仿真 2 通过DHT11传感器检测当前
  • 使用python streamlit库快速创建一个购物网站

    streamlit Streamlit 是一个基于 Python 的 Web 应用程序框架 致力于以更高效 更灵活的方式可视化数据 并分析结果 Streamlit是一个开源库 可以帮助数据科学家和学者在短时间内开发机器学习 ML 可视化仪表
  • 强化学习在机器人导航中的路径规划策略分析

    机器人导航是指机器人在未知环境中自主移动的过程 路径规划是机器人导航中的一个重要问题 其目的是找到一条最优路径 使机器人能够快速 安全地到达目的地 传统的路径规划方法往往基于启发式算法 如A 算法 Dijkstra算法等 这些方法在一定程度
  • InterLM代码解析

    interLM的Transformer架构 重要模块的实现解析 Decoder架构 class InternLMDecoderLayer nn Module def init self config InternLMXComposerCon
  • 服务器托管与服务器租用的详细比较

    在当今数字化时代 服务器托管和服务器租用成为了许多企业和个人选择的两种常见方式 它们都提供了一种将服务器放置在专业机房中的解决方案 但在具体实施和使用过程中存在一些差异 下面将详细比较这两种方式的优势和劣势 1 服务器托管 服务器托管是指用
  • 详解Spring中的Profile

    详解Spring中的Profile 一 前言 二 Spring中的Profile 是什么 三 配置Spring profile 3 1 例子需要的Maven依赖 3 2 例子代码 四 激活Profile的其他几种方式 一 前言 由于在项目中
  • 赚了!用Python兼职,月赚49K!

    大家好 先说个冷知识 现在业界对Python技术服务的需求量正在暴涨 当下早已供不应求 且有愈演愈烈的趋势 极不平衡的供需关系 使Python兼职的价格变得极高 几乎所有的Python圈内人 都在利用Python写代码接私活赚钱 近期Pyt
  • 【uniapp】小程序中input输入框的placeholder-class不生效解决办法

    问题描述 uniapp微信小程序 使用input组件时 想要改变提示词 placeholder 的样式 但是使用 placeholder class 改变不了 如下