成功解决:如何使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的样式修改字体颜色、下划线、选中/未选中
4043 0
|
JavaScript 安全 C++
打破约定俗成:其实Vue3的子组件也是可以“直接”改props的
为了避免混淆,先介绍一下后端语言用的类。一般类可以包含内部成员、属性、方法、事件等。内部成员一般都是私有的(其实也可以设置为公有),调用者不可以直接访问内部成员,而是要通过属性来访问内部成员。
打破约定俗成:其实Vue3的子组件也是可以“直接”改props的
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10533 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
5996 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
4756 0
|
前端开发
el-form-item label中的字体样式设置格式
这篇文章介绍了如何在Element UI的`el-form-item`组件中自定义`label`标签的样式,通过使用`slot`属性和内联CSS来改变字体颜色和加粗显示。
el-form-item label中的字体样式设置格式
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
6859 0
|
JavaScript 开发者
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
1855 0
Element UI & Element Plus之改变表格单元格颜色
|
前端开发 JavaScript API
开箱即用的axios封装:Vue3+TS(建议收藏)
Axios多用于处理前端项目的Ajax请求,这里要注意区分Axios和Ajax:Ajax是一种技术统称,Axios是第三方库。在使用的时候,我们可以直接使用Axios来发起请求,也可以封装后采用统一的接口发送请求。在前端项目中,应该大多数人都会选择封装一下Axios,不仅可以节省代码,看起来更简洁;而且可以统一管理请求和响应。本文就以Vue3+Typescript,封装一个”开箱即用“的Axios。
12445 6
开箱即用的axios封装:Vue3+TS(建议收藏)