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

vue3+js 下拉el-select样式修改

<el-select popper-class="my-custom-dropdown"clearable v-model="searchModel.alarmLevel"style="width: 300px;"placeholder="请选择"><el-option v-for="(item, index) in alarmLevels":key="index":label="item.label":value="item.value"></el-option></el-select>
<style>/* 全局样式文件,或者 <style> 不带 scoped */.my-custom-dropdown{background-color:#07224c;border-radius:8px;padding:10px;}.my-custom-dropdown.el-popper.is-light{border:1px solid #236ace;--el-popper-bg-color-light:#07224c;}.my-custom-dropdow.el-popper.is-light>.el-popper__arrow:before{border:1px solid red;}/* .el-popper.is-light>.el-popper__arrow:before */.my-custom-dropdown.el-select-dropdown__item{color:#fff;font-size:14px;}.my-custom-dropdown.el-select-dropdown__item:hover{background-color:#236ace;color:#fff;}.my-custom-dropdown.el-select-dropdown__item.is-selected{background-color:#1158bc85!important;}.my-custom-dropdown.el-select-dropdown__item.is-hovering{background-color:#1158bc85!important;}.my-custom-dropdown.el-tree-select__popper{background:rgba(23,101,210,0.01);box-shadow:inset-2px 2px 5px 0pxrgba(75,150,255,0.3),inset 3px-2px 5px 0pxrgba(75,150,255,0.25);border-radius:2px 2px 2px 2px;border:1px solid #236ace;.el-tree-node__content{color:#fff;background:rgba(23,101,210,0.01)!important;&:hover{background-color:#1158bc85;}}.el-select-dropdown__item,.el-select-dropdown__item.is-selected,.el-select-dropdown__item.is-hovering{background:rgba(23,101,210,0.01)!important;}}.my-custom-dropdown.el-select__selection{.el-select__selected-item.el-tag{background-color:#1158bc85;color:#fff;}}</style>
http://www.jsqmd.com/news/887309/

相关文章:

  • uniapp:带参数回到上一页
  • Wirtinger导数保姆级教程:像处理实变量一样对复变量求导(附Python示例)
  • 2026年Q2回转窑烘干机可靠品牌排行实测盘点:喷雾烘干机/工业滚筒烘干机/带式干燥机/旋转闪蒸烘干机/桨叶干燥机/选择指南 - 优质品牌商家
  • CRA《网络弹性法案》附件 I:产品网络安全要求解读
  • URP下RenderTexture逻辑分屏实现双人联机对战
  • 深入Linux内核:从sendmsg/recvmsg看数据包是如何被“组装”和“拆解”的
  • DIY辉光管时钟:GPS校时与高压驱动方案全解析
  • 性能优化实战:Unity中Mesh Collider、Box Collider怎么选?附移动端适配建议
  • 65_《智能体微服务架构企业级实战教程》运维与部署之集成LangSmith实现全链路追踪
  • 立体匹配新星CREStereo详解:它的‘自适应群相关层’如何解决相机标定不准的难题?
  • 2026中巴双边贸易格局与产品结构全景分析
  • 从电子伦理到工程实践:如何设计一个负责任的非接触式消毒设备
  • 从零打造吉他效果器:软硬削波、哇音与晶体管过载电路全解析
  • 阜阳靠谱的断桥铝系统门窗工厂
  • 大规模工作流性能压测与调优:从单机瓶颈到分布式扩展
  • 适合地产人用的中介房源管理系统
  • 【不乱于心,不乱于行】战法一
  • BLE四大广播模式详解:可连接/不可连接/定向/周期广播
  • 从零设计高保真电吉他拾音器:低阻抗、宽频响与现代音频工作流适配
  • TVA在电子元器件领域的创新应用(10)
  • 如何免费解锁Cursor Pro:开源破解工具cursor-free-vip终极指南
  • 展会直击|颠覆传统EHS!金汤令亮相长三角应急博览会,开启AI+EHS智能托管新模式
  • arm架构源码编译部署mysql 5.7.44
  • 如何在macOS上免费解锁QQ音乐加密文件:完整指南
  • 巴基斯坦海关清关要求与合规操作手册
  • 告别Unity默认Text!TextMeshPro图文混排实战:从表情包到聊天系统
  • ATtiny85驱动I2C LCD与多传感器:超低功耗环境监测终端实战
  • 告别命令行恐惧!在Windows上像用Excel一样玩转TASSEL 5.0做GWAS分析
  • 深入Linux内核:从sendmsg/recvmsg看进程间fd传递的底层实现与性能考量
  • Python爬虫实战(十二):视频数据采集与批量下载