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

修改el-select图标的颜色时查了一下发现很多的文章不起作用，可能是因为我用的scss的原因吧，最后还是修改成功了，记录一下。下面是el-select相关的代码<div class="measure-section"><span class="section-span">时间段：</span><el-select v-model="type" plac

新晋代码小菜鸟

7733人浏览 · 2021-12-20 17:02:48

新晋代码小菜鸟 · 2021-12-20 17:02:48 发布

修改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>