Это современное решение, которое я приготовил, используя font-awesome . Расширения поставщиков были опущены для краткости.
HTML
<fieldset>
<label for="color">Select Color</label>
<div class="select-wrapper">
<select id="color">
<option>Red</option>
<option>Blue</option>
<option>Yellow</option>
</select>
<i class="fa fa-chevron-down"></i>
</div>
</fieldset>
SCSS
fieldset {
.select-wrapper {
position: relative;
select {
appearance: none;
position: relative;
z-index: 1;
background: transparent;
+ i {
position: absolute;
top: 40%;
right: 15px;
}
}
}
Если ваш элемент select имеет определенный цвет фона, то это не сработает, так как этот фрагмент по существу помещает значок Chevron позади элемента select (чтобы позволить нажатию в верхней части значка по-прежнему инициировать действие выбора).
Тем не менее, вы можете стилизовать оболочку select к тому же размеру, что и элемент select, и стилизовать его фон для достижения того же эффекта.
Проверьте мой CodePen для рабочей демонстрации, которая показывает этот бит кода как на темном, так и на светлом тематическом окне выбора, используя обычную метку и метку "заполнителя", и другие очищенные стили, такие как границы и ширина.
P.S. Это ответ, который я отправил на другой, дублирующий вопрос ранее в этом году.