el-select 修改样式

这样漂亮的页面，搭配的却是一个白色风格的下拉框 ，这也过于刺眼。。。

调整后样式为：

灯红酒绿总有人看着眼杂，但将风格统一终究是上上选择。下面来处理这个问题。

分为两部分。

第一部分：是修改触发框的样式

第二部分：是修改弹出的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>