这样漂亮的页面,搭配的却是一个白色风格的下拉框 ,这也过于刺眼。。。
调整后样式为:
灯红酒绿总有人看着眼杂,但将风格统一终究是上上选择。下面来处理这个问题。
分为两部分。
第一部分:是修改触发框的样式
第二部分:是修改弹出的popover的样式
1、修改触发框的样式,将边框、背景颜色置为匹配的颜色
<style lang="scss" scoped>::v-deep {.el-input__inner {background-color: transparent;border: 1px solid white;color: white;line-height: 28px;height: 28px;font-size: 12px;padding: 0 0 0 10px;} } </style>
2、修改弹出的popover的样式。
给el-select添加popper-class
添加CSS样式修改对应的UI样式
<style> .popperView.el-select-dropdown {border: 3px solid #343434; }.popperView .el-select-dropdown__list {background-color: #222; }/* 自定义选中的选项背景色 */ .popperView .el-select-dropdown__item.selected {background-color: rgba(2, 134, 240, 0.2);color: white; }/* 自定义鼠标悬停的选项背景色 */ .popperView .el-select-dropdown__item:hover {background-color: #ecf5ff; }.popperView .el-select-dropdown__item {background-color: transparent;&:hover {background-color: rgba(2, 134, 240, 0.2);;color: white;} }.el-popper[x-placement^=top] .popper__arrow::after {border-top-color: #343434; }.el-popper[x-placement^=top] .popper__arrow {border-top-color: #343434; }.el-popper[x-placement^=bottom] .popper__arrow::after {border-bottom-color: #343434; }.el-popper[x-placement^=bottom] .popper__arrow {border-bottom-color: #343434; } </style>