对于ElementUI中的select组件,其默认是这样子的
elementui select默认样式
但是,现在要求是这样的
在这里插入图片描述
其他都好说,最主要的是这个图标…

网上也是查了半天,好像有这种需求的并不多,我就纳闷,难道你们都是使用默认的吗?就不需要自定义了吗?…

好吧,既然国内的查不到,那我就去看看国外有没有这个需求,终于功夫不负有心人,让我查到了,流泪(╥╯^╰╥)

链接:Change icon in of element-ui Select

解决方法:

既然ElementUI没有提供接口自定义icon,那么我们就只能自己实现了

  • 我们可以看到,select组件是通过.el-icon-arrow-up:before自定义的icon图标,所以我们就可以直接改变.el-icon-arrow-up:beforecontent的内容
    在这里插入图片描述
.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%);
}
Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐