Vue ElementUI el-select自定义图标,左右任意自定义加图标

316 阅读1分钟

`上代码,基于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; } `