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;
}

效果:

相关推荐
长空任鸟飞_阿康3 分钟前
提示词管理器设计:从需求到用户体验的高效落地逻辑
前端·人工智能·ux
零點壹度ideality10 分钟前
鸿蒙实现可以上下左右滑动的表格-摆脱大量ListScroller
前端·harmonyos
林希_Rachel_傻希希12 分钟前
this 的指向与 bind() 方法详解
前端·javascript
Komorebi゛14 分钟前
【Vue3】使用websocket实现前后端实时更新数据
前端·websocket
想要狠赚笔的小燕14 分钟前
老项目救星:Vue3/Vite/JS 项目渐进式引入「代码 + Commit」自动化规范全指南(多人协作)
前端·vue.js
用户3521201956020 分钟前
React-router v7(下)
前端
枫,为落叶21 分钟前
【vue】设置时间格式
前端·javascript·vue.js
郝学胜-神的一滴43 分钟前
Linux系统函数link、unlink与dentry的关系及使用注意事项
linux·运维·服务器·开发语言·前端·c++
昔人'1 小时前
css`text-wrap:pretty`
前端·css
勇敢di牛牛1 小时前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js