要求定制element-ui选择框Select,需求为增加一根竖线,原始样式为如图,通过打开f12查看样式,做如下调整
修改后效果:
//html
<div class="hello"><el-select v-model="value" placeholder="请选择"><el-optionv-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;}
}