vue3+ts+element-plus 输入框el-input设置背景颜色

普通情况:

组件内容:

html 复制代码
<el-input v-model="applyBasicInfo.outerApplyId"/>

样式设置:

html 复制代码
::v-deep .el-input__wrapper {
  background-color: pink;
}

// 也可以这样设置
::v-deep(.el-input__wrapper) {
  background-color: pink;
}

// 也可以这样设置
:deep(.el-input__wrapper) {
  background-color: pink;
}

// 也可以这样设置
:deep .el-input__wrapper {
  background-color: pink;
}

效果:


特殊情况:输入框设置禁用状态

组件内容:

html 复制代码
<el-input v-model="applyBasicInfo.outerApplyId" disabled/>

样式设置:

html 复制代码
::v-deep .el-input__wrapper {
  background-color: pink;
}

效果:输入框前后部分均没有背景颜色

解决方法:

组件内容:增加类名设置 class="disabled-input"

html 复制代码
<el-input v-model="applyBasicInfo.outerApplyId" disabled class="disabled-input"/>

样式设置:增加类名 .disabled-input

html 复制代码
::v-deep .disabled-input .el-input__wrapper {
  background-color: pink;
}

效果:

相关推荐
LuckyLay36 分钟前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust
pobu1681 小时前
aksk前端签名实现
java·前端·javascript
烛阴1 小时前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw01 小时前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦1 小时前
VUE实现数字翻牌效果
前端·javascript·vue.js
南岸月明1 小时前
我与技术无缘,只想副业搞钱
前端
gzzeason2 小时前
在HTML中CSS三种使用方式
前端·css·html
hnlucky2 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web
huihuihuanhuan.xin2 小时前
前端八股-promise
前端·javascript
星语卿3 小时前
浏览器重绘与重排
前端·浏览器