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

el-select选择器,默认样式效果:

通过

* {

margin: 0;

padding: 0;

}

去掉内外边距后的样式效果(样式变丑了):

通过 popper-class 自定义类名修改下拉选项列表样式

el-select 标签设置 popper-class="custom-select-dropdown"

html 复制代码
            <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>

设置样式

html 复制代码
/* 通过 popper-class 自定义类名修改下拉列表样式 */
.custom-select-dropdown {
  .el-select-dropdown__item {
    // 文本缩进
    text-indent: 20px;

    /* 第一个选项 */
    &:first-child {
      color:blueviolet;
    }

    /* 最后一个选项 */
    &:last-child {
      color:chocolate;
    }
  }
}

最终效果:

知识扩展

html 复制代码
/* 通过 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;
  //   }
  // }
}
相关推荐
vvilkim16 分钟前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践
前端·vue.js·react.js
天天扭码20 分钟前
在项目中常见的main.js和main.mjs有什么区别,我们该如何选择?
前端·javascript·面试
姑苏洛言29 分钟前
在开发扫码小程序中,遇到胡坑“require() 默认不支持绝对路径”及其解决方案
前端
Passerby_K30 分钟前
vue3+dhtmlx 甘特图真是案例
前端·vue·甘特图
佳腾_36 分钟前
【Web应用服务器_Tomcat】二、Tomcat 核心配置与集群搭建
java·前端·中间件·tomcat·web应用服务器
brzhang1 小时前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构
三巧1 小时前
纯CSS吃豆人(JS仅控制进度)
javascript·css·html
SummerGao.1 小时前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码
javascript·css·html
天天扭码2 小时前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试