修改element-ui 下拉框样式

最新推荐文章于 2024-08-13 16:23:31 发布

皮皮虾学vue

最新推荐文章于 2024-08-13 16:23:31 发布

阅读量1.4k

点赞数

文章标签：前端 javascript elementui

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

版权

这篇博客介绍了如何通过CSS调整Element-UI的Select组件，实现增加竖线的效果以及修改选中图标的颜色和大小。作者通过修改.SASS样式文件，调整了Select组件的背景颜色、高度、宽度，并添加了竖线，同时改变了内部图标的颜色和大小，使其更加个性化和适应页面设计。

摘要由CSDN通过智能技术生成

要求定制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;
    }
}