ElementUI 选择器(下拉菜单)样式


:popper-append-to-body="false" 必须写才能覆盖样式

HTML

<el-select v-model="value" placeholder="请选择" :popper-append-to-body="false">
    <el-option label="label1" value="value1"> el-option>
    <el-option label="label2" value="value2"> el-option>
el-select>

SCSS

 1 /deep/.el-popper {
 2   border: 1px solid rgba(32, 139, 248, 0.54);
 3   border-radius: 3px;
 4   box-shadow: 0px 0px 10px 0px rgba(32, 139, 248, 0.29) inset,
 5     0px 0px 12px 1px rgba(32, 139, 248, 0.19) inset;
 6   background: #0a274995;
 7 }
 8 /deep/.el-select {
 9   .el-select:hover .el-input__inner,
10   .el-select .el-input__inner:focus,
11   .el-select .el-input.is-disabled .el-input__inner:hover {
12     border: 1px solid rgba(32, 139, 248, 0.54);
13   }
14   .el-select-dropdown__item.selected {
15     color: #8fd4ff !important;
16   }
17   .el-select-dropdown__item {
18     color: #fff;
19   }
20   .el-select-dropdown__item.hover,
21   .el-select-dropdown__item:hover {
22     background-color: #208bf830;
23   }
24 }