Стрелка в select

Question

Как сделать, чтобы расстояние от первого option до стрелки было фиксированным. Я хотел первому option дать псевдоэлемент и задать ему margin-left: 11px, но не работает.

Получается нужно элементу select прописать background-image и каждому этому элементу задать background-position. Или есть другое решение?

select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

option {
  font-family: "TTNormsPro-Regular";
  font-size: 16px;
}

option:first-child::after {
  content: url(https://img.icons8.com/material-two-tone/2x/arrow.png);
  margin-left: 11px;
}

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

<div class="form-line">
  <div class="label">Способ оплаты</div>
  <select class="Когда заберете?">
    <option value="skoro">В ближайшее время</option>
    <option value="card">На этой неделе</option>
  </select>
</div>

Answer 1

<Option>-ы - это то, что показано ПОД <select>-ом при его раскрытии. Они стилятся, но а) ограниченно и б) вам не поможет.

Когда в <select>-е что-то выбрано, отображаемое содержимое - это уже НЕ <Option>, а взятый из него текст. На него влияют стили <select>-а. И эти стили тоже далеко не все применимы.

В вашем случае можно попробовать, например, так:

сделать <select>-у прозрачный цвет текста ,фона и бордера (но при этом не забыть задать цвет и фон <Option>-ам)
и под него подложить нужного вида <div>, в котором будет <span>, которому:
1. задать стиля padding-right:**px; background-image:***;background-repeat:no-repeat;background-position:center right;
2. задать ID.
3. при изменении (выборе значения) <select>-а яваскриптом совать его value в этот <span>.

Но вот это все костылить ради сомнительного дизайна?..

БЛОГ НА HUSL

Стрелка в select

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