(css)element中el-select下拉框整体样式修改

news2024/12/16 11:26:59

(css)element中el-select下拉框整体样式修改


在这里插入图片描述


重点代码(颜色可行修改)

// 修改input默认值颜色 兼容其它主流浏览器
/deep/ input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.50);
}
/deep/ input::-moz-input-placeholder {
    color: rgba(255, 255, 255, 0.50);
}
/deep/ input::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.50);
}
// input框
/deep/ .el-select,
/deep/ .el-input,
/deep/ .el-input__inner {
    background-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.50);
    border: none; // 去掉边框
    // border-color: #XXXXXX // 默认边框的颜色
    text-align: left;
    border-radius: 4px;
}

// 选中时边框颜色
// /deep/ .el-input__inner:focus{
//     border-color: #XXXXXX;
// }

// 鼠标悬浮时 input框颜色
/deep/ .el-input__inner:hover{
    background-color: rgba(255, 255, 255, 0.12);
}

// input框 右侧的箭头
/deep/ .el-select .el-input .el-select__caret {
    color: rgba(255, 255, 255, 0.50);
}

// option选项 上面的箭头
/deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
    border-bottom-color: rgba(43, 45, 55, 0.80);
    z-index: 9999;
}
/deep/ .popper__arrow {
    border: none;
}
// option选项 最外层
/deep/ .el-select-dropdown {
    border: none !important;
    background: rgba(43, 45, 55, 0.80) !important;
    z-index: 9999;
}
// option选项 文字样式
/deep/ .el-select-dropdown__item {
    color: rgba(255, 255, 255, 0.50) !important;
    z-index: 9999;
}
/deep/ .el-select-dropdown__item.selected span{
    color: rgba(255, 255, 255, 0.80) !important;
    z-index: 9999;
}
// 移入option选项 样式调整
/deep/ .el-select-dropdown__item.hover{
    background-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.80) !important;
    z-index: 9999;
}

// 下拉框垂直滚动条宽度
/deep/ .el-scrollbar__bar.is-vertical {
     width: 10px;
     top: 2px;
 }
// 下拉框最大高度
 /deep/ .el-select-dropdown__wrap {
     max-height: 200px;
 } 

解决参考:https://blog.csdn.net/qq_43432158/article/details/122497039

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2260466.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

论文概览 |《Sustainable Cities and Society》2024.12 Vol.116

本次给大家整理的是《Sustainable Cities and Society》杂志2024年12月第116期的论文的题目和摘要,一共包括52篇SCI论文! 论文1 Enhancing road traffic flow in sustainable cities through transformer models: Advancements and challenges 通过变压…

【电源专题】开关转换器的三种过流保护方案

开关转换器内部集成功率开关,使限流保护成为基本功能。常用限流方案有三种:恒流限流、折返限流和打嗝模式限流。 恒流限流 对于恒流限流方案,当发生过载情况时,输出电流保持恒定值(ILIMIT)。因此,输出电压会下降。这种方案通过逐周期限流实现,利用流经功率开关的峰值电感…

网络与安全

文章目录 网络协议OSI七层模型TCP/IP协议族TCP协议UDP协议HTTP协议HTTPS协议 SocketSocket编程粘包与拆包 网络安全常见网络攻击及防护放火墙网络加密技术 跨域问题 网络协议 网络协议是计算机网络中设备和系统之间进行数据交换的规则和约定。它定义了数据的格式、传输方式、处…

鸿蒙项目云捐助第六讲鸿蒙App应用的首页导航资讯推荐功能的实现

鸿蒙项目云捐助第六讲鸿蒙App应用的首页导航资讯推荐功能的实现 前面的教程中已实现了启动页,登录页,注册页及首页的部分功能。这里有一些朋友提出问题,如何设置登录页面的背景图片。这里稍带说一个这个功能的实现。 一、登录页面的背景图片…

SpringCloud微服务实战系列:03spring-cloud-gateway业务网关灰度发布

目录 spring-cloud-gateway 和zuul spring webflux 和 spring mvc spring-cloud-gateway 的两种模式 spring-cloud-gateway server 模式下配置说明 grayLb://system-server 灰度发布代码实现 spring-cloud-gateway 和zuul zuul 是spring全家桶的第一代网关组件&#x…

【蓝桥杯每日一题】推导部分和——带权并查集

推导部分和 2024-12-11 蓝桥杯每日一题 推导部分和 带权并查集 题目大意 对于一个长度为 ( N ) 的整数数列 A 1 , A 2 , ⋯ , A N A_1, A_2, \cdots, A_N A1​,A2​,⋯,AN​ ,小蓝想知道下标 ( l ) 到 ( r ) 的部分和 ∑ i l r A i A l A l 1 ⋯ A r \sum_{…

[代码随想录17]二叉树之最大二叉树、合并二叉树、二搜索树中的搜索、验证二叉搜索树。

前言 二叉树的题目还是要会一流程构造函数之类的。其中还有回溯的思想 题目链接 654. 最大二叉树 - 力扣(LeetCode) 一、最大二叉树 思路:还是考察构造二叉树,简单来说就是给你一个数组去构建一个二叉树,递归来解决就…

让 Win10 上网本 Debug 模式 QUDPSocket 信号槽 收发不丢包的方法总结

在前两篇文章里,我们探讨了不少UDP丢包的解决方案。经过几年的摸索测试,其实方法非常简单, 无需修改代码。 1. Windows 下设置UDP缓存 这个方法可以一劳永逸解决UDP的收发丢包问题,只要添加注册表项目并重启即可。即使用Qt的信号与槽&#…

水凝胶微机器人:复杂体内环境的“导航高手”

大家好!今天来了解一项关于成像引导的生物可吸收声学水凝胶微型机器人(BAM)的研究——《Imaging-guided bioresorbable acoustic hydrogel microrobots》发表于《SCIENCE ROBOTICS》。这项研究为生物医学工程领域带来了新的突破,有…

噪杂环境(房车改装市场)离线语音通断器模块

一直在坚持,却很难有机会上热门,在现在这个以流量为导向的时代,貌似很难靠所谓的坚守和热爱把产品成功的推向市场了。目前的客户仍然是以老客户为主,应用场景主要是房车改装,根据九客户的需求定制化一些模块。因为没有…

Liinux下VMware Workstation Pro的安装,建议安装最新版本17.61

建议安装最新版本17.61,否则可能有兼容性问题 下载VMware Workstation安装软件 从官网网站下载 https://support.broadcom.com/group/ecx/productdownloads?subfamilyVMwareWorkstationPro 选择所需版本 现在最新版本是17.61,否则可能有兼容性问题…

数据结构速成

1. 数据结构与算法 2. 顺序表 3. 链表 4. 栈与队列 5. 串 6. 树与二叉树(1) 7. 树与二叉树(2) 8. 图 9. 图的应用 10. 查找 11. 排序(1) 12. 排序(2)

巅峰极客2024

Misc Misc题搞得有点像re病毒分析,不过misc成分还是比较高 源文件有upx壳,脱完了获得的程序沙箱跑不出来 IDA分析一下发现有虚拟机检测,所以只能在本地运行 运行后释放了两个文件 图片其实在释放程序中能找到 file文件上传沙箱后显示是木马…

gorm源码解析(二):核心设计与初始化

文章目录 前言基本使用初始化db实例定义model增删改查 数据结构gorm.DBStatementSchema元数据clone 初始化初始化DB初始化dialector用dialector初始化db注册crud函数执行器processor注册callback Clause抽象解析元数据解析schema解析field 总结 前言 上一篇文章介绍了什么是OR…

科研绘图系列:R语言绘制网络图和密度分布图(network density plot)

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载图1图2图3图4图5图6图7图8系统信息参考介绍 R语言绘制网络图和密度分布图(network & density plot) 加载R包 library(magrittr) library(dplyr) library(…

CSS学习第二天

HTML文本颜色 颜色属性被用来设置文字的颜色,颜色通过css最经常的指定: #FF000;RGB(255,0,0);颜色的名称red 一个网页的背景颜色是指在主体内的选择 文本的对齐方式 文本排列属性是…

springboot437校园悬赏任务平台(论文+源码)_kaic

摘 要 使用旧方法对校园悬赏任务平台的信息进行系统化管理已经不再让人们信赖了,把现在的网络信息技术运用在校园悬赏任务平台的管理上面可以解决许多信息管理上面的难题,比如处理数据时间很长,数据存在错误不能及时纠正等问题。这次开发的校…

医学分割数据集白内障严重程度分割数据集labelme格式719张3类别

数据集格式:labelme格式(不包含mask文件,仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数):719 标注数量(json文件个数):719 标注类别数:3 标注类别名称:["normal","severe","mi…

搭建Tomcat(二)--反射的应用

引入 Tomcat 在处理HTTP请求时,会根据一系列规则和配置来判断该请求是想要获取动态资源还是静态资源。 为什么要对请求进行判断? Tomcat 判断HTTP请求是动态请求还是静态请求的主要目的是确定如何生成并返回响应内容。静态请求通常意味着服务器只需读取并…

电子科技大学考研,计算机与软件专业怎么选择?

电子科技大学在计算机与软件领域具备卓越实力,其毕业生就业前景及薪资水平均颇为可观。因此,学生应依据个人课程专长来选定专业。若各项课程均表现出色,推荐25届考生优先考虑软件专业,因其上岸难度相对较低。 接下来,C…