Element Plus中el-select选择器的下拉选项列表的样式设置

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;//   }// }
}