当前位置: 首页 > article >正文

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

普通情况:

组件内容:

<el-input v-model="applyBasicInfo.outerApplyId"/>

样式设置:

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

效果:


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

组件内容:

<el-input v-model="applyBasicInfo.outerApplyId" disabled/>

 样式设置:

::v-deep .el-input__wrapper {
  background-color: pink;
}

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

解决方法:

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

<el-input v-model="applyBasicInfo.outerApplyId" disabled class="disabled-input"/>

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

::v-deep .disabled-input .el-input__wrapper {
  background-color: pink;
}

效果:

 

 


http://www.kler.cn/a/504823.html

相关文章:

  • C++|CRC校验总结
  • 微信小程序获取openid
  • (STM32笔记)十二、DMA的基础知识与用法 第二部分
  • 【Rust自学】12.2. 读取文件
  • istio-proxy oom问题排查步骤
  • FLASK 上传文件
  • 【机器学习】实战:天池工业蒸汽量项目(二)特征工程
  • java 设计模式 建造者模式
  • 基于 STM32 连接 Mini MP3 播放器的实践探索
  • 使用vue3实现语音交互的前端页面
  • 《解决OpenMP运行时库副本问题:解锁高效编程》
  • 用sql 基线 替换执行计划
  • 基于 FastAPI 的数据库设计与优化
  • api开发及运用小红书笔记详情api如何获取笔记详情信息
  • 合并PDF文件的方法和免费工具
  • 算法竞赛(蓝桥杯)贪心算法1——数塔问题
  • 【Web】0基础学Web—jQuery、jQuery遍历、jQuery样式设置、jQuery操作属性、jQuery操作节点、jQuery事件
  • windows 极速安装 Linux (Ubuntu)-- 无需虚拟机
  • Android 通过systrace如何快速找到app的刷新率
  • 【Python】Python之locust压测教程+从0到1demo:基础轻量级压测实战(1)
  • Mongodb相关内容
  • Flink链接Kafka
  • [读书日志]8051软核处理器设计实战(基于FPGA)第六篇:8051软核处理器指令支持添加(verilog)
  • 大数据学习(35)- spark- action算子
  • 六种主流虚拟化技术全解析:OpenStack、KVM、Hyper-V、VMware、Xen及Docker
  • 网络安全 | 定期安全审计与漏洞扫描:企业网络健康检查