el-select修改样式

el-select修改样式

实现效果如下:

<el-select
   v-model="selectJdYear"
   placeholder=""
   size="small"
   class="year1-sel elselect"
   popper-class="elpopperbox"
>
  <el-option
    v-for="item in yearOptions"
    :key="item.value"
     :label="item.label"
     :value="item.value"
	>
   </el-option>
</el-select>

yearOptions: [
    	{
          value: "2022",
          label: "2022年",
        },
        {
          value: "2023",
          label: "2023年",
        },
],

注意: style 不能使用scoped

<style>
.elpopperbox {
  background-color: rgba(46, 163, 220, 0.26) !important;
  border: 1px solid #2893cc !important;
  border-radius: 0 !important;
}

.elpopperbox el-select-dropdown__item {
  color: #707070 !important;
}
.elpopperbox .popper__arrow::after {
  border-bottom-color: rgba(46, 163, 220, 0.26) !important;
}

.elpopperbox .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: rgba(46, 163, 220, 0.5) !important;
}

.elpopperbox .el-select-dropdown__item.selected {
  color: #fff !important;
}
</style>