Почему я не могу изменить значок выпадающего меню?

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

Вы не можете использовать :: после выбора. У меня была такая же проблема, как и у вас. Лучший способ сделать это - использовать фоновое изображение 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.