`上代码,基于Vue项目
//CSS
.selsectbox{
width:130px;
}
//自定义el-input框的一些自定义样式
::v-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;
}
//替换左边默认图标
::v-deep .selsectbox .el-icon-arrow-up::before {
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%);
}
//替换左边默认图标第二种
::v-deep .el-input--suffix::before {
content: "";
background: url('../../assets/images/11.png') center center no-repeat;
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
::v-deep .selsectbox .el-input--small input::-webkit-input-placeholder {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 550;
color: #2881FF;
}
`