在开发过程中，我们一般遇到特殊的UI效果图，不得不修改<el-select>默认样式了。

修改el-select框样式

<template><el-selectv-model="yearValue"class="select_box"multipleplaceholder="请选择年份支持多选":teleported="false"><el-optionv-for="item in yearOptions":key="item.value":label="item.label":value="item.value"/></el-select>
</template>

.select_box {width: 170px;// 默认placeholder:deep(.el-input__inner::placeholder) {color: #ccc;}// 默认框状态样式更改:deep(.el-input__wrapper) {background-color: #1d333700 !important;box-shadow: 0 0 0 1px #3fa6f4 inset !important;--el-select-focus-border-color: #3fa6f4 !important;--el-select-hover-border-color: #3fa6f4 !important;}// 修改下拉框样式-点击框focus:deep(.is-focus .el-input__wrapper) {box-shadow: 0 0 0 1px #3fa6f4 inset !important;--el-select-focus-border-color: #3fa6f4 !important;--el-select-hover-border-color: #3fa6f4 !important;}:deep(.el-select__caret) {color: #3fa6f4 !important; // 清除按钮}:deep(.el-input__inner) {color: #3fa6f4 !important; // 选中字体色}:deep(.el-select-dropdown__empty) {background-color: #072258;color: #ddd !important;}:deep(.el-select-dropdown__wrap) {color: #fff;background-color: #072258;color: #ddd !important;}:deep(.el-select-dropdown__item) {color: #fff !important;}:deep(.el-select-dropdown__item.hover) {background-color: rgb(22, 81, 244) !important;color: #ddd !important;}:deep(.el-select-dropdown__item.selected) {background-color: rgb(22, 81, 244) !important;color: #ddd !important;}:deep(.el-select-tags-wrapper.has-prefix>span) {background-color: rgb(22, 81, 244) !important;color: #ddd !important;}
}// 下拉框-展开样式
.el-select-dropdown__item.selected {// background-color: #83e818!important; // 选中
}.el-select-dropdown__item.hover {background-color: #121f1b !important; // hover
}:deep .el-dropdown-menu__item:not(.is-disabled) {// color: #182F23!important; // disabled
}.el-select-dropdown__item {color: #3fa6f4 !important; // 下拉项颜色
}:deep .el-popper {background-color: #121f1b !important; // 展开下拉背景border: 1px solid #3fa6f4 !important; // 展开下拉边框
}:deep .el-popper .el-popper__arrow::before {border-top: 1px solid #3fa6f4 !important; // 箭头按钮边框background-color: #121f1b !important; // 箭头按钮背景色
}

这里需要注意一点，<el-select>修改下拉框的样式需要加上:teleported="false"详细看element plus官网文档