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

学无止境。。。。。。

相关文章
input 输入框两种改变事件的方式
一、在输入框内容变化的时候不会触发,当鼠标在其他地方点一下才会触发 $('input[name=myInput]').change(function() { ... });   二、在输入框内容变化的时候会触发     $("#input_id").
1239 0
|
前端开发
CSS实现input默认文字灰色有提示文字点击后消失鼠标移开显示
CSS实现input美化操作默认是为灰色,并且有提示 如下图     鼠标点击后文字消失,鼠标移开后文字显示   给input入下图添加代码   style="color:#cccccc; outline:none;"value="用户名/邮箱/手机号" onfocus="this.
1620 0
饿了么UI按钮禁用时加文字提示,按钮正常时不加文字提示(el-tooltip使用注意事项)
饿了么UI按钮禁用时加文字提示,按钮正常时不加文字提示(el-tooltip使用注意事项)
345 0
|
存储
element侧边栏根据权限不同内容改变的实现
今天在搭项目基本大框的时候,发现了一个问题,就是我们的产品后台有两个管理端,并且两个管理端所有的功能仅仅查一个功能页面,这个时候就需要考虑两个管理端使用一套,并且不同的账号有不同的权限和页面
248 1
element侧边栏根据权限不同内容改变的实现
|
JavaScript 前端开发 双11
清除前端标签中(输入框)的内容
清除前端标签中(输入框)的内容
160 0
|
9月前
textarea文本框根据输入内容自动适应高度
textarea文本框根据输入内容自动适应高度
146 0
输入框禁用状态 可清空输入框如何实现?组件写的
输入框禁用状态 可清空输入框如何实现?组件写的
|
7月前
|
前端开发
css 超实用的:empty —— 隐藏空元素、缺失字段智能提示
css 超实用的:empty —— 隐藏空元素、缺失字段智能提示
160 0

热门文章

最新文章