Как сделать, чтобы расстояние от первого 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>
option
иbackground
не в их числе. Это связано с тем, что этот тип элемента является примером «замещенного элемента». Они зависят от ОС и не являются частью HTML/браузера. Его нельзя стилизовать с помощью CSS. Ознакомьтесь с документацией