Раскрывающийся список, который создается с помощью тега <select> каждый браузер отображает по своему, и такое отображение очень часто не совпадает с дизайном сайта, на котором используется данный элемент.
К сожалению, общего свойства CSS для изменения элемента <select> нет, приходится создавать собственные стили для оформления этого элемента, в том числе и стрелки.
Но сложного в этом ничего нет, теоретически все очень просто: у вас есть элемент <select> с выпадающим списком, и если вам нужно изменить его внешний вид, все, что для этого надо сделать, это настроить его стили в CSS.
HTML код формы
Допустим, что у нас есть такой код списка:
<select class="form-select">
<option value="01">Директор</option>
<option value="02">Менеджер</option>
<option value="03">Кладовщик</option>
</select>
И по умолчанию он выглядит следующим образом:
Понятно, что в каждом браузере такой список будет отображаться по разному и его внешний вид часто не подходит к дизайну сайта на котором он будет установлен, поэтому это дело нужно исправить. Всю форму списка мы сейчас менять не будем, изменим только стрелку и некоторые стили.
CSS код формы
Первое, что нужно сделать, это избавиться от стрелки, которая отображается по умолчанию и сделаем это мы с помощью свойства appearance, которое переводится, как "внешность", со значением none.
.form-select {
appearance: none;
}
Все современные браузеры поддерживают это свойство, но если вы хотите добавить поддержку более ранних версий браузеров, то можно добавить префиксы для них. В итоге внешний вид нашего списка изменится и будет уже без стрелки:
Теперь нам нужно добавить свое изображение стрелки, для этого можно использовать любые файлы в формате SVG, PNG или JPEG.
Мы будем использовать в данном примере SVG формат, так как ему можно сразу указать размер и цвет и по дизайну данное изображение вполне подходит для этой цели.
.form-select {
appearance: none;
-webkit-appearance: none; /* Safari и Chrome */
-moz-appearance: none; /* Mozilla */
-ms-appearance: none; /* IE */
background-image: url("data:image/svg+xml,<svg height='15px' width='15px' viewBox='0 0 16 16' fill='%23c4e1ee' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
background-repeat: no-repeat;
background-color: #fff;
background-position: calc(100% - 15px) center;
width: 200px;
padding: 8px 32px 8px 16px;
outline: none;
cursor: pointer;
}
Дополним наши стили следующими свойствами:
background-image - здесь мы указываем url нашего изображения.
background-repeat - этим свойством мы отключаем повторение изображения.
background-color - здесь мы указываем фон нашего списка, так как фон, который был по умолчанию мы убрали.
background-position - здесь мы центрируем нашу стрелку на форме так, как нам нужно.
Остальные стили задают внешний вид нашего меню и поведение при наведении на него курсором.
При желании все стили для изменения фона можно записать в одной строке:
background: #fff url("data:image/svg+xml,<svg height='15px' width='15px' viewBox='0 0 16 16' fill='%23c4e1ee' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat calc(100% - 15px) center;
В результате наша стрелка приобретет новый вид, который больше подходит под дизайн сайта.
Настройка SVG файла
Отдельно нужно пояснить, как использовать встроенный SVG-контент в качестве фонового изображения.
Изображение находится между тегами, <svg> и </svg>
<svg height='15px' width='15px' viewBox='0 0 16 16' fill='%23314050' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>
Перед ним внутри url() сначала добавьте data:image/svg+xml, а затем, после запятой вставьте код svg файла.
Чтобы изменить цвет изображения, нужно изменить параметр fill='%23314050'. Он не имеет знака «#», вместо него здесь %23 и чтобы добавить шестнадцатеричный цвет, просто замените «#» на %23 314050, чтобы получилось %23314050.
Чтобы изменить размер изображения, нужно изменить параметры высоты height='15px' и ширины width='15px'.
Это основные настройки которые позволят вам создать стрелку нужного цвета и размера.
Как видите заменить стрелку в списке select достаточно просто с помощью одних только стилей.