Оформление select, как изменить стрелку в раскрывающемся списке в CSS — HRCode
Верстка элементов

Оформление select, как изменить стрелку в раскрывающемся списке в CSS

Раскрывающийся список, который создается с помощью тега <select> каждый браузер отображает по своему, и такое отображение очень часто не совпадает с дизайном сайта, на котором используется данный элемент.

К сожалению, общего свойства CSS для изменения элемента <select> нет, приходится создавать собственные стили для оформления этого элемента, в том числе и стрелки.
Но сложного в этом ничего нет, теоретически все очень просто: у вас есть элемент <select> с выпадающим списком, и если вам нужно изменить его внешний вид, все, что для этого надо сделать, это настроить его стили в CSS.

HTML код формы

Допустим, что у нас есть такой код списка:

HTML

<select class="form-select">
    <option value="01">Директор</option>
    <option value="02">Менеджер</option>
    <option value="03">Кладовщик</option>
</select>

И по умолчанию он выглядит следующим образом:
select-01

Понятно, что в каждом браузере такой список будет отображаться по разному и его внешний вид часто не подходит к дизайну сайта на котором он будет установлен, поэтому это дело нужно исправить. Всю форму списка мы сейчас менять не будем, изменим только стрелку и некоторые стили.

CSS код формы

Первое, что нужно сделать, это избавиться от стрелки, которая отображается по умолчанию и сделаем это мы с помощью свойства appearance, которое переводится, как "внешность", со значением none.

CSS

.form-select {
    appearance: none;
}

Все современные браузеры поддерживают это свойство, но если вы хотите добавить поддержку более ранних версий браузеров, то можно добавить префиксы для них. В итоге внешний вид нашего списка изменится и будет уже без стрелки:

select-02

Теперь нам нужно добавить свое изображение стрелки, для этого можно использовать любые файлы в формате SVG, PNG или JPEG.

Мы будем использовать в данном примере SVG формат, так как ему можно сразу указать размер и цвет и по дизайну данное изображение вполне подходит для этой цели.

CSS

.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 - здесь мы центрируем нашу стрелку на форме так, как нам нужно.

Остальные стили задают внешний вид нашего меню и поведение при наведении на него курсором.

При желании все стили для изменения фона можно записать в одной строке:

CSS

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;

select-03

В результате наша стрелка приобретет новый вид, который больше подходит под дизайн сайта.

Настройка SVG файла

Отдельно нужно пояснить, как использовать встроенный SVG-контент в качестве фонового изображения.

Изображение находится между тегами, <svg> и </svg>

CSS

<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 достаточно просто с помощью одних только стилей.

Еще по теме:

Напишите что нибудь:

Ваш адрес email не будет опубликован. Обязательные поля помечены *