成功解决:如何使element中输入框颜色改变,以及如何解决使用/deep/ 出现警告信息问题

简介: 这篇文章讲述了如何在Element UI中改变输入框的背景颜色,以及如何解决使用深度选择器`/deep/`时出现的警告信息问题。文章提供了使用深度选择器修改背景颜色的CSS代码示例,展示了修改效果,并解释了如何通过在`/deep/`前加`div`或使用`::v-deep`来解决出现的红色波浪线警告问题。

使用element中的输入框默认时白色的背景、如果要改变为其它颜色,发现设置的样式不起作用、在使用深度选择器后,可以解决背景色问题;但是发现深度选择器有红色波浪线、虽然不报错,但是看起来很难受,可以使用div或者::v-deep实现。

实现效果对比

地址是修改过的背景色、个人介绍是默认

在这里插入图片描述

1、官网上的输入框默认样式

在这里插入图片描述

2、使用深度选择器修改

/deep/ 前后都有空格,这里的背景色按自己的需要设置

 /* 改变input框背景颜色 */
/deep/ .el-input__inner {
  background-color: RGB(250, 250, 250);

}

2.1效果

背景色设置为浅灰色

在这里插入图片描述

2.2 出现的问题

在这里插入图片描述

3、解决出现波浪线的问题

/deep/前加个div

在这里插入图片描述

4、后语

学无止境。。。。。。

相关文章
|
6月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
832 3
|
6月前
|
前端开发
css 超实用的:empty —— 隐藏空元素、缺失字段智能提示
css 超实用的:empty —— 隐藏空元素、缺失字段智能提示
147 0
|
容器
文本溢出省略号text-overflow: ellipsis显示无效?这一属性到底该怎么用?
文本溢出省略号text-overflow: ellipsis显示无效?这一属性到底该怎么用?
240 0
|
8月前
|
JSON 定位技术 数据格式
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)
84 0
|
8月前
|
JavaScript 前端开发 定位技术
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(上)
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)
82 0
|
JavaScript
checkbox选中和取消,控制dom元素颜色变化
checkbox选中和取消,控制dom元素颜色变化
73 0
|
前端开发
css只改变input输入框光标颜色不改变文字颜色实现方法
css只改变input输入框光标颜色不改变文字颜色实现方法
|
存储
element侧边栏根据权限不同内容改变的实现
今天在搭项目基本大框的时候,发现了一个问题,就是我们的产品后台有两个管理端,并且两个管理端所有的功能仅仅查一个功能页面,这个时候就需要考虑两个管理端使用一套,并且不同的账号有不同的权限和页面
240 1
element侧边栏根据权限不同内容改变的实现
饿了么UI按钮禁用时加文字提示,按钮正常时不加文字提示(el-tooltip使用注意事项)
饿了么UI按钮禁用时加文字提示,按钮正常时不加文字提示(el-tooltip使用注意事项)
330 0
|
JavaScript
网站复制文字内容layer弹出提示框
今天教大家如何添加网站文字内容复制弹出提示框,提示版权信息,一个简单的js弹窗。
188 0
网站复制文字内容layer弹出提示框