el-select選擇器，默認樣式效果：

通過

* {

? margin: 0;

? padding: 0;

}

去掉內外邊距后的樣式效果（樣式變丑了）：

通過 popper-class 自定義類名修改下拉選項列表樣式

el-select 標簽設置?popper-class="custom-select-dropdown"

            <el-select popper-class="custom-select-dropdown" v-model="templateValue" placeholder="請選擇" clearable filterable allow-create><el-option label="報告封面1" value="template1"></el-option><el-option label="報告封面2" value="template2"></el-option><el-option label="報告封面" value="template3"></el-option></el-select>

設置樣式

/* 通過 popper-class 自定義類名修改下拉列表樣式 */
.custom-select-dropdown {.el-select-dropdown__item {// 文本縮進text-indent: 20px;/* 第一個選項 */&:first-child {color:blueviolet;}/* 最后一個選項 */&:last-child {color:chocolate;}}
}

最終效果：

?

知識擴展

/* 通過 popper-class 自定義類名修改下拉列表樣式 */
.custom-select-dropdown {/* 修改下拉列表容器的樣式 */// .el-select-dropdown {// }/* 修改選項列表的樣式 */// .el-select-dropdown__list {// }/* 修改選項列表（單個選項）的樣式 */.el-select-dropdown__item {// 文本縮進text-indent: 20px;/* 第一個選項 */&:first-child {color:blueviolet;}/* 最后一個選項 */&:last-child {color:chocolate;}/* 懸停狀態 */// &:hover {//   background-color: #e0e0e0;// }/* 選中狀態 */// &.selected {//   color: #409eff;// }}/* 修改下拉框滾動條樣式 */// .el-scrollbar__wrap {//   &::-webkit-scrollbar {//     width: 6px;//   }//   &::-webkit-scrollbar-thumb {//     background: #c0c4cc;//     border-radius: 3px;//   }// }
}