对于ElementUI中的select组件,其默认是这样子的
但是,现在要求是这样的
其他都好说,最主要的是这个图标…
网上也是查了半天,好像有这种需求的并不多,我就纳闷,难道你们都是使用默认的吗?就不需要自定义了吗?…
好吧,既然国内的查不到,那我就去看看国外有没有这个需求,终于功夫不负有心人,让我查到了,流泪(╥╯^╰╥)
解决方法:
既然ElementUI没有提供接口自定义icon,那么我们就只能自己实现了
- 我们可以看到,
select
组件是通过.el-icon-arrow-up:before
自定义的icon图标,所以我们就可以直接改变.el-icon-arrow-up:before
的content
的内容
.el-icon-arrow-up:before {
content: "\e6df";
}
至于具体的图标内容你可以在ElementUI的Icon组件中进行查找
当然,你也可以不用content,直接使用图片也是可以的
.el-select .el-input .el-select__caret::before {
/*content: "\e78f"*/
content: "";
background: url(./images/down_icon.png) center center no-repeat;
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}