成功解决:如何使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、后语

学无止境。。。。。。

相关文章
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
3443 0
|
前端开发
饿了么el-dialog自定义内容以及el-dialog自定义样式
饿了么el-dialog自定义内容以及el-dialog自定义样式
980 0
|
JavaScript 前端开发 数据安全/隐私保护
vue element plus Input 输入框
vue element plus Input 输入框
720 0
element 下拉菜单el-dropdown如何更改样式?
element 下拉菜单el-dropdown如何更改样式?
1928 0
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
2635 0
|
编解码 前端开发 搜索推荐
什么是响应式设计?响应式设计的基本原理是什么?如何实现?
什么是响应式设计?响应式设计的基本原理是什么?如何实现?
1594 0
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
5997 0
Element el-date-picker 日期选择器详解
|
JavaScript
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9479 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
前端开发
Vue3 大屏数字滚动效果
Vue3 大屏数字滚动效果
545 0