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>