el-select的背景透明和图标颜色修改

最新推荐文章于 2025-10-09 14:23:39 发布

原创最新推荐文章于 2025-10-09 14:23:39 发布 · 9k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

本文介绍了一种在使用scss的情况下，如何成功修改Element UI中el-select下拉图标颜色的方法，并提供了具体的代码示例。

修改el-select图标的颜色时查了一下发现很多的文章不起作用，可能是因为我用的scss的原因吧，最后还是修改成功了，记录一下。
下面是el-select相关的代码

    <div class="measure-section">
      <span class="section-span">时间段：</span>
      <el-select v-model="type" placeholder="请选择" popper-class="selectFrom">
        <el-option
          v-for="item in options"
          :key="item.type"
          :label="item.label"
          :value="item.type"
        >
        </el-option>
      </el-select>
    </div>

scss修改el-select的样式

<style lang="scss" scoped>
::v-deep .el-input__inner {
  background-color: transparent !important;
  //   border-color: rgba(255, 255, 255, 0.5);
  color: #d9d9d9;
  height: 40px;
}
/**修改边框和字体颜色 */
::v-deep .el-select {
  position: relative;
  width: 450px;
  .el-input {
    input {
      height: 40px;
      border-color: rgba(44, 137, 229, 0.5);
      color: #fff;
    }
  }
}
/**修改下拉图标颜色 */
::v-deep .el-input__suffix {
  .el-input__suffix-inner {
    .el-icon-arrow-up:before {
      color: rgba(44, 137, 229, 0.5);
      padding-left: 0.11rem;
    }
  }
}
</style>