ElementUI中select组件中的icon图标自定义

对于ElementUI中的select组件，其默认是这样子的

但是，现在要求是这样的

其他都好说，最主要的是这个图标…

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

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

链接：Change icon in of element-ui 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%);
}