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

ops/2025/1/16 17:33:50/

普通情况:

组件内容:

<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.ppmy.cn/ops/150606.html

相关文章

你喜欢用什么编辑器?

电脑工作者和程序员所使用的文本编辑器通常需要具备高效率、易用性以及对代码友好等特点&#xff0c;包括语法高亮、自动完成、多文件同时编辑、查找替换、版本控制集成等功能。以下是几个广受开发者欢迎且实用性较强的文本编辑器&#xff1a; Visual Studio Code&#xff08;V…

洛谷题目 P11532 [THUPC2025 初赛] 好成绩

题目传送门&#xff1a;P11532 [THUPC2025 初赛] 好成绩 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) Hello啊大家好我是小亦&#xff0c;大家都知道我已经半个月没有更新博文&#xff0c;因为备考期末考试所以暂停了更新&#xff0c;现在照常更新&#xff0c;今天我们讲的…

【微信小程序】let和const-综合实训

let 和 const 都是用于声明变量的关键字&#xff0c;它们与传统的 var 关键字相比&#xff0c;有很多不同之处。 let 声明块级作用域变量&#xff0c;可再赋值&#xff1b;const 声明块级作用域常量&#xff0c;不可再赋值。 以下是它们的详细介绍&#xff1a; 一、基本概念…

【漏洞分析】DDOS攻防分析

0x00 UDP攻击实例 2013年12月30日&#xff0c;网游界发生了一起“追杀”事件。事件的主角是PhantmL0rd&#xff08;这名字一看就是个玩家&#xff09;和黑客组织DERP Trolling。 PhantomL0rd&#xff0c;人称“鬼王”&#xff0c;本名James Varga&#xff0c;某专业游戏小组的…

JS的事件循环机制

<script>setTimeout(()>{console.log(1)},1000)setTimeout(()>{console.log(2)},3000)var start Date.now();while ( (Date.now() - start) < 10000 ){}console.log(3)</script>执行如下代码会发现先打印3&#xff0c;再打印1 再打印2。 现象本质还是因为…

【Elasticsearch】高亮搜索:从原理到Web呈现

🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/?__c=1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编程,高并发设计,Springboot和微服务,熟悉Linux,ESXI虚拟化以及云原生Docker和K8s,热衷于探…

Unity解决滑动条的value值的滑动条消失问题

在这里我们看到原本的value的滑动条消失了 解决办法 把编辑器的边框往外面拉一下就可以了&#xff08;之前遇到这个问题还重启了几次unity没想到居然是这个问题&#xff09;

八 rk3568 android11 AP6256 蓝牙调试

一 经典蓝牙 经典蓝牙默认可以工作, 验证可以连接 蓝牙鼠标,键盘, 连接手机等等, 在 系统设置里打开蓝牙 ,扫描设备,配对连接即可。 注: 连接 ANDROID 手机的坑 1 手机连接之后空闲状态会断开 ,变成 配对的设备不是已连接,是正常,使用时又会自动 连接 2 手机传…