0

.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>

1
  • У вас ошибка синтаксиса, вы забыли закрыть блок у .form-line. 26 сен 2022 в 10:53

1 ответ 1

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>

9
  • Мне нужно, чтобы от placeholder'a был равный отступ для нескольких select 26 сен 2022 в 10:59
  • @ДмитрийЛюба, не понял. Поясните.
    – Danila
    26 сен 2022 в 10:59
  • У меня есть несколько .form-line с select. В первом select placeholder="text". Во втором select placeholder="text text text". Мне нужно, чтобы margin-right от плейсхолдера до стрелки был одинаковым. А в вашем примере мне для каждого selecta нужно прописывать background-position 26 сен 2022 в 11:04
  • @ДмитрийЛюба placeholder используется для <input>, причём тут <select>?
    – ΝNL993
    26 сен 2022 в 11:07
  • @ДмитрийЛюба, причём тут margin-right? Положение стрелки определяется с помощью background-position, а расстояние от текста до стрелки - шириной select'а. Посмотрите мой код внимательно - я там задал эти параметры. Можете изменять их так, как Вам нужно.
    – Danila
    26 сен 2022 в 11:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.