el-input的color修改无效问题

最新推荐文章于 2026-06-27 09:02:06 发布

转载最新推荐文章于 2026-06-27 09:02:06 发布 · 2.9k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/MrZWJ/p/10542750.html

收录于

当前文章被以下社区和专栏收录：

本文详细介绍了如何在Element UI中成功修改el-input组件内的文本颜色，通过添加/deep/选择器解决样式覆盖问题，帮助前端开发者有效解决样式修改无效的困扰。

相信很多前端初学者跟我一样也遇到过el-input的color修改无效问题

如下图：我想把el-input里面的文字改成蓝色，但是使用总是失败

修改方法：打开调试界面，找到el-input对应的style样式，找到style下面的color，对其进行颜色修改，看界面上的el-input颜色是否会发生改变，若是改变，那么就是这个类了，

步骤如下

修改调试器里面的color之前：

修改为蓝色之后：

那么我这里可以修改el-input的类就是color上面的.el-input.is-disabled .el-input__inner，（这里是自己的调试器上的类，不能照抄）

但是我将其修改为这个类之后发现还是无法完成文本颜色修改，然后经指点，需要在两者之间加一个/deep/, 即.el-input.is-disabled /deep/ .el-input__inner，（/deep/两端有空格),然后就完美解决了，希望对大家有所帮助

转载于:https://www.cnblogs.com/MrZWJ/p/10542750.html

标签

#javascript #ui #ViewUI

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

diaoting2815

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue框架开发Electron12 - 动态改变Element-Ui默认el-Input背景样式

qq_39388660的博客

09-09

6381

Element-ui是一个非常好的UI设计模块，它提供给我们很多好看的按钮样式，非常适用于快速搭建UI，下面说说如果使用了element-ui之后，要更改它默认的el-Input样式应该怎么操作。使用调试工具找出他的样式默认表，具体操作如下：从上图知道默认的样式是.el-input__inner,那下面在改成自己想要的颜色： <style > .el-input__i...

修改el-input disabled状态下的字体颜色,vue修改子组件中的el-inputdisabled状态下的placeholder字体颜色

pleaseprintf的博客

03-10

6100

修改el-input disabled状态下的字体颜色,vue修改子组件中的el-inputdisabled状态下的placeholder字体颜色。

参与评论您还未登录，请先登录后发表或查看评论

HTML5 input placeholder 颜色及修改失效的解决办法

zccmp20的专栏

02-14

2275

1.调整代码如下： input::input-placeholder{color: #bdbdbd ;} /* 有些资料显示需要写，有些显示不需要，但是在编辑器webstorm中该属性不被识别 */ ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } ::-moz-placehold...

ios的input框在禁用状态字体颜色修改无效？？？？？？

Dark_programmer的博客

04-07

1408

奇奇怪怪，可可爱爱问题描述：在移动端有input输入框，但是是禁用的状态，但是默认的字体颜色和大背景颜色又区分不开。想着用 !important强制改掉，在pc端切换成pad模式或者手机模式，显示正常；但是在真正的pad端查看，颜色仍是无变化问题原因：移动端环境下android只需设定input的color即可而ios下input disabled的默认样式会有默认样式opacity以及隐藏样式-webkit-text-fill-color .el-input input{ col.

修改el-input 输入框颜色以及placeholder颜色

weixin_54165147的博客

07-28

8031

element，el-input，输入，样式

修改el-input 禁用状态下的字体颜色

z17864151193的博客

10-30

7354

<div class="input"><el-input class="rt-input" :disabled value="你好></el-input></div> <style scoped> .rt-input /deep/ .el-input__inner { color: rgb(92, 112, 234) !important; cursor: pointer; } vue组件中，在style设置为scoped的时候，里面..

修改el-select或者el-input样式失效

lanmy_dl的博客

08-02

1733

因为在页面的时候我取消样勾选就满意黑色，所以以为设置的是none，结果代码里面设置none是白色，然后一直以为没有生效，当改成自己想要的颜色就可以了。可是一直不生效，最初看到说:popper-append-to-body="false"设置为false，没用。下午改el-input和el-select这两个的样式真的烦，，，还不如写原生标签了。，注意没有空格，然后按照所寻找的样式选择器放进来就可以了。我已经在样式器中挨着挨着去找了，把层级的类都写下来了。后面感觉就是样式穿透的问题，样式使用的是sass。

el-input自动填充与设置input背景色无效

weixin_44294359的博客

09-16

406

el-input自动填充与设置input背景色无效

el-input设置背景色，改变样式

gjylalaland的博客

03-30

8710

思路：在浏览器控制台的元素中发现el-input是两层，div里套了个input，直接在中设置颜色的话无法达到效果，查看发现el-input__inner才是真正input的那层，设置一个class名称来定位到此，style样式中用了scoped，在css样式中加上deep和important。

使用element-ui碰到的问题总结

weixin_43777007的博客

01-26

1196

使用element-ui碰到的问题总结自定义element-ui失效问题例如想将input输入框和button放在一行进行显示。 <div class="text"> <el-input v-model="searchText" placeholder="搜索项目名称" prefix-icon="el-icon-search"> </el-input> <el-button type="primar

DOM操作核心原理：属性、特性与样式的三层关系

weixin_30394981的博客

06-20

416

DOM（文档对象模型）是浏览器将HTML解析为可编程JavaScript对象的核心机制。理解其底层原理，关键在于厘清属性（attributes）、特性（properties）和样式（styles）三者的本质差异与协同逻辑：属性对应HTML源码的静态文本，特性反映JS运行时的动态状态，而样式则需区分内联设置、CSS规则层叠与浏览器最终计算值。这种分层设计决定了为何setAttribute('value')无法更新输入框内容，而element.value可以；也解释了classList为何比className赋

JavaScript DOM操作三要素：属性、类名与样式的精准控制

weixin_30500473的博客

06-20

372

DOM（文档对象模型）是前端开发的核心基础，它将HTML结构映射为可编程的JavaScript对象。理解HTML attributes（属性）、DOM properties（属性状态）和computed styles（计算样式）三层差异，是实现稳定交互的前提。attributes用于声明元数据（如data-*、aria-*），properties反映实时状态（如value、checked），而classList和style.property则分别承担样式开关与动态内联样式的原子化操作。掌握这些机制不仅能避免

CSS placeholder兼容性原理与工程化实践指南

weixin_30698527的博客

06-20

346

placeholder是HTML表单中用于提示用户输入内容的临时文本，其本质并非普通文本节点，而是由浏览器引擎动态注入的伪元素。由于WebKit、Gecko、Blink和Trident四大渲染引擎对::placeholder的实现存在根本性差异，导致CSS属性支持度、层叠行为和继承规则高度不一致。这种碎片化不仅引发颜色、字体、透明度等基础样式失效，更在深色模式切换、动态主题计算及跨端小程序中触发隐蔽渲染异常。通过CSS自定义属性、PostCSS自动化前缀注入、Design Token驱动配置及运行时视觉回归

textarea 滚动条属性设置

lijun_xiao2009的专栏

05-29

1709

textarea 滚动条属性设置 scrollbar属性、样式详解 1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2．scrollbar-3d-light-

踩过100+CSS坑后，我整理了这篇全场景避坑指南

斌味代码的博客

05-14

523

《CSS避坑指南：6年老前端总结的实战经验》本文总结了前端开发中最常见的CSS坑点及解决方案，涵盖布局、文本、优先级、兼容性和动画等场景。核心内容包括： Flex布局中min-width:0解决内容撑破容器问题文本处理推荐组合：word-break:normal + overflow-wrap:break-word Vue样式穿透的正确写法：:deep()替代已废弃的/deep/ Safari兼容性处理：Flex布局需加min-height:0 高性能动画原则：优先使用transform和opacity

Selenium execute_script：突破Web自动化瓶颈的JavaScript桥梁

最新发布

weixin_34236869的博客

06-27

435

在Web自动化测试与数据采集领域，JavaScript作为浏览器原生语言，是实现复杂页面交互的核心技术。其原理在于通过浏览器引擎直接操作DOM（文档对象模型），赋予开发者超越标准API的底层控制能力。这项技术的核心价值在于能够处理动态内容渲染、复杂事件触发以及绕过前端交互限制等场景，极大提升了自动化脚本的灵活性与覆盖范围。Selenium的execute_script函数正是连接Python自动化脚本与浏览器JavaScript引擎的关键桥梁，它允许在页面上下文中直接执行JS代码，从而实现对页面滚动、元素属

Angular Renderer2 原理与实战：跨平台DOM操作的核心机制

weixin_33713503的博客

06-21

440

Renderer2 是 Angular 实现平台无关 DOM 操作的关键抽象层，其本质是将视图更新逻辑与具体渲染环境解耦。它基于接口定义（Renderer2）与动态实现（DefaultDomRenderer2/ServerRenderer2/WebWorkerRenderer2）的分层设计，确保组件在浏览器、服务端渲染（SSR）及 Web Worker 等不同平台下行为一致且安全。该机制支撑了 Angular 的变更检测、样式封装、服务端预渲染和 Web Component 集成等核心能力。开发者绕过 Re

jQuery属性与样式操作原理：attr()、prop()、css()、addClass()核心区别

diedangxiang4092的博客

06-14

396

在Web前端开发中，DOM元素的属性（Attribute）与属性（Property）存在本质差异：前者是HTML源码中的字符串快照，后者是运行时的JavaScript对象状态。理解这一区分是掌握jQuery操作逻辑的基础。jQuery通过attr()管理初始化配置与标记，prop()控制交互状态（如disabled、checked），css()提供内联样式的强干预能力，而addClass()系列则实现声明式、可复用的CSS类名管理。这种分层设计兼顾了浏览器兼容性、性能优化与工程可维护性，尤其适用于遗留系统维

Vue 3 原生集成 Web Components：绕过 @ionic/vue 的实战路径

weixin_33690367的博客

06-21

343

Web Components 是 W3C 标准的跨框架 UI 组件技术，基于 Custom Elements、Shadow DOM 和 HTML Templates 构建，具备天然框架无关性与浏览器原生支持能力。其核心价值在于实现设计系统一次开发、多端复用，显著降低 UI 规范维护成本。在 Vue 3 工程中，直接消费 Ionic Core 等标准 Web Components，可跳过 Vue 封装层（如 @ionic/vue），获得更短调用链、更高性能（实测首屏快 38%）及更可控的生命周期管理。典型应用