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

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



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

css 复制代码
// 修改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

相关推荐
jiayong233 分钟前
0基础学习VUE3 第 3 课:任务页怎么把列表、筛选、表单、弹窗串起来
前端·javascript·学习
蜡台4 分钟前
Monorepo 架构管理多个子项目实现
前端·javascript·vue.js·pnpm·monorepo
guojb8245 分钟前
从0开始设计一个树和扁平数组的双向同步方案
前端·数据结构·vue.js
前端小趴菜057 分钟前
Vue项目,前端如何来做登录密码加密传输?
前端·javascript·vue.js
tangdou3690986558 分钟前
图文并茂安装Claude Code 以及配置 Coding Plan 教程
前端·人工智能·后端
arvin_xiaoting9 分钟前
OpenClaw学习总结_II_频道系统_4:Slack集成详解
前端·学习·自动化·llm·ai agent·飞书机器人·openclaw
CHU72903517 分钟前
让知识传递更顺畅:在线教学课堂APP的功能设计
前端·人工智能·小程序
周淳APP19 分钟前
【React Hook全家桶】大致过一遍React Hooks
前端·javascript·react.js·前端框架·react hooks
sheji341622 分钟前
【开题答辩全过程】以 基于web的图书借阅系统的设计与实现为例,包含答辩的问题和答案
前端