成功解决:如何使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的样式修改字体颜色、下划线、选中/未选中
3589 0
|
前端开发
饿了么el-dialog自定义内容以及el-dialog自定义样式
饿了么el-dialog自定义内容以及el-dialog自定义样式
1048 0
element 下拉菜单el-dropdown如何更改样式?
element 下拉菜单el-dropdown如何更改样式?
2061 0
|
编解码 前端开发 搜索推荐
什么是响应式设计?响应式设计的基本原理是什么?如何实现?
什么是响应式设计?响应式设计的基本原理是什么?如何实现?
1661 0
|
JavaScript
|
前端开发
Vue3 大屏数字滚动效果
Vue3 大屏数字滚动效果
571 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9910 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
4641 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式
1528 0