修改选择框el-select样式,显示及下拉样式

最新推荐文章于 2024-12-09 09:59:31 发布

原创最新推荐文章于 2024-12-09 09:59:31 发布 · 992 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Web前端专栏收录该内容

225 篇文章

订阅专栏

这篇文章详细介绍了如何修改ElemeUI(Element)中的el-select组件的样式，包括背景、边框、选中项颜色等，以达到自定义显示效果。

修改选择框el-select样式,显示及下拉样式

在这里插入图片描述

.el-input__inner {
  background: rgba(25, 126, 195, 0.2);
  border: none;
  color: #fff;
}

.el-select-dropdown {
	background: rgba(19, 73, 104, 0.79);
	border: 2px solid #48e3ff;
	border-radius: 0;
}

.el-popper .popper__arrow {
	display: none;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
	background: rgba(255, 255, 255, 0.2);
}

.el-select-dropdown__item {
	color: #fff;
}
.el-select-dropdown__item.selected {
	color: #48e3ff;
}