Не могу заменить стандартную стрелку select. старую стрелку убираю, а новая не добавляется

Question

.form-line{
  position: relative;
select{
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
select::after{
  content: url(../img/select-arrow.svg);
  position: absolute;
  right: 0;
  top: 0;
}

<div class="form-line">
  <div class="label">Район доставки</div>
  <select class="text">
    <option value="">Выбрать</option>
    <option value="kharkov">Харьков</option>
    <option value="kiev">Киев</option>
    <option value="odessa">Одесса</option>
  </select>
</div>

Answer 1

Потому что у select'а не может быть псевдоэлемента. Сделайте через background:

select{
  width: 110px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: url(https://img.icons8.com/material-two-tone/2x/arrow.png) no-repeat;
  background-position: 100% 0;
  background-size: contain;
}

<div class="form-line">
  <div class="label">Район доставки</div>
  <select class="text">
    <option value="">Выбрать</option>
    <option value="kharkov">Харьков</option>
    <option value="kiev">Киев</option>
    <option value="odessa">Одесса</option>
  </select>
</div>

БЛОГ НА HUSL

Не могу заменить стандартную стрелку select. старую стрелку убираю, а новая не добавляется

Ответы (1 шт):