修改element-ui 下拉框样式

最新推荐文章于 2024-05-16 02:53:35 发布

皮皮虾学vue

最新推荐文章于 2024-05-16 02:53:35 发布

阅读量1.3k

点赞数

文章标签：前端 javascript elementui

本文链接：https://blog.csdn.net/weixin_51298483/article/details/126023133

版权

要求定制element-ui选择框Select，需求为增加一根竖线，原始样式为如图，通过打开f12查看样式，做如下调整

修改后效果：

//html
<div class="hello">
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>

//sass
$px: 1vh;
$hpx: 1vh;
$wpx: 1vw;

* {
  margin: 0;
  padding: 0;
}
.hello {
  height: 88 * $hpx;
  width: 96%;
  margin: 0 auto;
  background-color: silver;
  padding: 4 * $px;
        //自适应长宽，与背景颜色
    .el-input__inner {
      height: 6 * $hpx;
      width: 14 * $wpx;
      background-color: wheat;
    }
     //新增线条
    .el-input__suffix {
      border-left: 1px solid white;
    }
    修改图标样式与自适应大小
    .el-select .el-input .el-select__caret {
      color: green;
      font-size: 1.6 * $px;
    }
}