VueElementUIel-select⾃定义图标，左右任意⾃定义加图标
本来⼈家官⽅的组件我们前端就觉得特好看了，但是每个公司都有特别执拗的UI，硬是要换样式，你只能换了
这个下拉框中左右⾃定义图标，⽹上好多案例说的不清楚，且实现起来相当⿇烦
看下我的效果图
上代码，基于Vue项⽬
<div class="subjectleft">
<el-select v-model="value" placeholder="请选择" class="selsectbox">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
//CSS
.
selsectbox{
width:130px;
}
//⾃定义el-input框的⼀些⾃定义样式
/deep/ .selsectbox .el-input--small .el-input__inner{
background-color: #e6f0ff;
padding-left:40px;
height:50px;
border-radius: 5px;
color: #1890FF;
font-size: 18px;
border: 1px solid #1890FF;
font-weight: 600;
}
//⾃定义右边图标
.selsectbox /deep/.el-input__inner{
background: url(../../../assets/newIndex/iconkemu.png) no-repeat center center; //引⼊icon
background-size: 17px 19px;  //这个是图⽚的⼤⼩，在这⾥不能直接设置width  height，设置宽⾼其实是select的宽⾼，图⽚可能会失真只设置宽度⾼度auto 也⾏
background-position:12px 14px; //在input中定位置可以调整⾃定义icon的左右上下位置
padding: 0 0 0 26px; //需要设置padding 把placeholder向右移
box-sizing: border-box;
font-size: 14px;
}
//替换左边默认图标
/deep/.selsectbox .el-icon-arrow-up::before {
box sizing
content: "";
background: url(../../../assets/newIndex/sjiao.png) center center no-repeat;
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/deep/ .selsectbox .el-input--small input::-webkit-input-placeholder {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 550;
color: #2881FF;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。