element-UI el-select 简单修改下拉框样式

最新推荐文章于 2026-05-06 10:34:44 发布

原创最新推荐文章于 2026-05-06 10:34:44 发布 · 3.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #css #html5

收录于

element-ui 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何通过CSS深度选择器`/deep/`来修改Element-UI的`el-select`组件样式，以增大下拉框的最大高度并调整垂直滚动条的宽度。关键在于设置`popper-append-to-body=false`以允许样式生效，并使用CSS代码改变`.el-scrollbar__bar.is-vertical`和`.el-select-dropdown__wrap`的样式。

el-select原先的下拉框最大高度小，垂直滚动条太窄，想修改样式，覆盖掉原先的样式

没改样式前改样式后

主要代码如下：

<!-- 页面 -->
<el-select style="width:150px" v-model="searchKey.gradeId" value-key="gradeId" clearable 
placeholder="选择年级" :popper-append-to-body="false">
  <el-option
	v-for="item in gradeList"
	:key="item.gradeId"
	:label="item.gradeName"
	:value="item.gradeId">
  </el-option>
</el-select>

<!-- 样式 -->
<style scoped lang="stylus">
  // 下拉框垂直滚动条宽度
  /deep/ .el-scrollbar__bar.is-vertical {
    width: 12px;
    top: 2px;
  }
  // 下拉框最大高度
  /deep/ .el-select-dropdown__wrap {
   max-height: 400px;
  }
</style>

关键是加这个:popper-append-to-body="false"和 /deep/深度选择器

附图：