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

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

news 2025/7/19 8:51:21

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