为什么不能更改下拉图标？

Question

我无法将下拉图标从默认的“胡萝卜”更改为Fontawesome。

我还阅读了其他问题，但没有一个适合我。

<form>
 <div class="form-group">
  <select disabled class="custom-select">
   <option selected>Región Metropolitana</option>
  </select>
</div>
<div class="form-group">
 <select class="custom-select">
   <option selected>Comuna</option>
   <option>One</option>
   <option>Two</option>
   <option>Three</option>
  </select>
 </div>
</form>


.form-group .custom-select:disabled {
   background: none;
}

.form-group .custom-select::after {
  content: '\f107';
  font-family: "Font Awesome\ 5 Free";
  font-size: 1em;
  font-weight: bold;
  pointer-events: none;
  position: absolute;
  left: auto;
  top: 50px;
  z-index: 9;
  color: red;
}

我的下拉菜单应显示此字体惊人的图标：https://fontawesome.com/icons/angle-down?style=solid

Answer 1

不能将:: after与select一起使用。我和你有同样的问题。最好的方法是使用CSS背景图片自定义箭头。如：

select {
    background-color: white;
    background-image: url('../Images/Generic/arrowDownBlack.png');
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 20px 20px;
}

select::-ms-expand {
    display: none; //This gets rid of the arrow in IE.
}

如果您使用矢量图像，它将与字体真棒一样好。

为证明我是对的，您可以随时尝试将:: after添加到另一个元素。它会显示出来，但不会与select一起显示。