Как стилизовать select option css
Перейти к содержимому

Как стилизовать select option css

Как оформить раскрывающийся список с помощью только CSS?

Когда-то было довольно сложно оформить элемент для всех браузеров.

Чтобы избежать недостатков, которые были раньше, используйте оформление родительского элемента, добавление псевдоэлементов, а также применение JavaScript.

Оказывается, значительная часть стилей могут создать постоянный и приемлемый блок выбора (selection box) в новых браузерах, лучшим способом сохраняясь в старых браузерах.

Есть множество элементов в блоке выбора, к которым можно применить стиль, в частности width, height, font, border, color, padding, box-shadow и background color.

Рассмотрим пример, где применен стиль:

Пример

html> html> head> title>Заголовок документа title> style> .box < width: 120px; height: 30px; border: 1px solid #999; font-size: 18px; color: #1c87c9; background-color: #eee; border-radius: 5px; box-shadow: 4px 4px #ccc; > style> head> body> p>Обычный блок выбора: p> select> option>Кофе option> option>Чай option> option>Вода option> option selected>Коктейль option> select> p>Оформленный блок выбора: p> select class="box"> option>Кофе option> option>Чай option> option>Вода option> option selected>Коктейль option> select> body> html>

Но стрелка выпадающего (раскрывающегося) списка не меняется. Нет никакого непосредственного способа для ее оформления, но существуют некоторые методы, которые могут быть использованы для изменения стрелки раскрывающегося списка по умолчанию. Давайте рассмотрим эти 3 метода ниже.

1) Используйте appearance: none;

Чтобы скрыть стрелку по умолчанию раскрывающегося списка , установите CSS свойство appearance в значение «none», и дальше добавьте выбранную вами стрелку с помощью сокращенного свойства background.

Заметьте, что свойство appearance все еще считается экспериментальным, и вам потребуется использовать префикс -moz- (для Firefox) и -webkit- (для Chrome, Safari, Opera) для максимальной совместимости браузера.

Пример

html> html> head> title>Заголовок документа title> style> select < width: 140px; height: 35px; padding: 5px 35px 5px 5px; font-size: 18px; border: 2px solid #ccc; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") 96% / 15% no-repeat #eee; > select::-ms-expand < display: none; /* удалите стрелку по умолчанию в IE 10 и 11 */ > style> head> body> select> option>Кофе option> option>Чай option> option>Вода option> option selected>Коктейль option> select> body> html>

2) Используйте overflow: hidden;

Сначала вставьте элемент в div контейнер с фиксированной шириной и установите overflow: hidden . Потом для элемента задайте ширину на 20px больше, чем элемент . Таким образом, стрелка раскрывающегося списка будет скрыта (так как для контейнера установлено overflow: hidden ), и теперь уже можно будет применить фоновое изображение с правой стороны .

Можно использовать этот метод, так как все браузеры эффективно поддерживают overflow: hidden .

Заметьте, что недостатком этого метода является то, что опции визуально длиннее, чем меню выбора.

Пример

html> html> head> title>Заголовок документа title> style> .mystyle select < background: transparent; width: 140px; height: 35px; border: 1px solid #ccc; font-size: 18px; > .mystyle < width: 120px; height: 34px; border: 1px solid #111; border-radius: 3px; overflow: hidden; background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") 96% / 20% no-repeat #ddd; > style> head> body> div class="mystyle"> select> option>Кофе option> option>Чай option> option>Вода option> option selected>Коктейль option> select> div> body> html>

3) Используйте pointer-events: none;

CSS свойство pointer-events может быть использовано для создания индивидуальных раскрывающихся списков .

Этот метод работает отлично и хорошо поддерживается браузерами.

Пример

html> html> head> title>Заголовок документа title> style> .mybox < position: relative; display: inline-block; > select < display: inline-block; height: 30px; width: 150px; outline: none; color: #74646e; border: 1px solid #ccc; border-radius: 5px; box-shadow: 1px 1px 2px #999; background: #eee; > /* Select arrow styling */ .mybox .myarrow< width: 23px; height: 28px; position: absolute; display: inline-block; top: 1px; right: 3px; background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") right / 90% no-repeat #eee; pointer-events: none; > style> head> body> div class="mybox"> span class="myarrow"> span> select> option>Кофе option> option>Чай option> option>Вода option> option selected>Коктейль option> select> div> body> html>

4) Используйте знаки препинания вместо стрелок раскрывающегося списка

Отличным методом является использование предпочитаемых вами знаков вместо стандартного знака для блока .

Установите знаки с помощью свойства content и установите соответствующий font. Здесь можно установить «Consolas» и «monospace». Потом поверните знак пунктуации, используя свойство transform.

Пример

html> html> head> title>Заголовок документа title> style> select < width: 140px; height: 35px; padding: 4px; border-radius:4px; box-shadow: 2px 2px 8px #999; background: #eee; border: none; outline: none; display: inline-block; -webkit-appearance:none; -moz-appearance: none; appearance: none; cursor: pointer; > label < position: relative; > label:after < content:'<>'; font: 11px "Consolas", monospace; color: #666; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); right: 8px; top:2px; padding: 0 0 2px; border-bottom: 1px solid #ddd; position: absolute; pointer-events: none; > label:before < content: ''; right: 6px; top:0px; width: 20px; height: 20px; background: #eee; position: absolute; pointer-events: none; display: block; > style> head> body> label> select> option>Кофе option> option>Чай option> option>Вода option> option selected>Коктейль option> select> label> body> html>

Стилизация select

Стилизация select на чистом CSS без использования сторонних библиотек или JavaScript кода. А также бонус: рассмотрим как стилизовать select option при помощи JavaScript и jQuery.

  1. Стилизация slect при помощи appearance .
  2. Стилизация select option.
  3. Создание выпадающего списка, используя input .
  4. Проверка, открыт ли select.

Стилизация select

Структура будет стандартной:

 

Чтобы в select отображаемая строка была одна используем атрибут size со значением 1.

Стилизация для нашего select.

-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; background: url("path/img.png") no-repeat right center; outline: 0;

В примере выше мы прописали четыре строчки ccs свойства appearance с вендорными префиксами, чтобы свойство работало одинаково во всех браузерах. Что это за свойство читайте ниже.

Вся сложность заключалась лишь в замене стандартной стрелки в прямоугольнике, вместо которой мы реализовали background. Таким образом можно вставить любую картинку. Необходимо лишь подогнать размер при помощи свойства background-size

Appearance CSS

Реализовать нашу задачу помогло css3 свойство appearance.

Данное свойство позволяет изменить вид элемента на: button, checkbox, radio, field, icon и многое другое. В нашем случае мы вообще скрыли элемент, используя none и добавили картинку с помощью background.

Стилизация select option

Для того чтобы стилизовать select option нам потребуется JavaScript. Начнём с HTML и CSS.

 
.select < display: block; max-width: 215px; width: 100%; position: relative; >.new-select < position: relative; border: 1px solid #ced4da; padding: 10px 15px; cursor: pointer; user-select: none; >.new-select__list < position: absolute; top: 45px; left: 0; border: 1px solid #ced4da; cursor: pointer; width: 100%; z-index: 2; background: #fff; user-select: none; >.new-select__list.on < display: block; >.new-select__item span < display: block; padding: 10px 15px; >.new-select__item span:hover < color: #12b223; >.new-select:after < content: ""; display: block; width: 25px; height: 25px; position: absolute; right: 9px; top: 9px; background: url("path-to-image") no-repeat right center / cover; opacity: 0.6; transition: all .27s ease-in-out; transform: rotate(0deg); >.new-select.on:after

Перед JavaScript-кодом должен быть подключен jQuery.

$(".select").each(function () < const _this = $(this), selectOption = _this.find("option"), selectOptionLength = selectOption.length, selectedOption = selectOption.filter(":selected"), duration = 450; // длительность анимации _this.hide(); _this.wrap(" "); $("", < class: "new-select", text: _this.children("option:disabled").text() >).insertAfter(_this); const selectHead = _this.next(".new-select"); $("", < class: "new-select__list" >).insertAfter(selectHead); const selectList = selectHead.next(".new-select__list"); for (let i = 1; i < selectOptionLength; i++) < $("", < class: "new-select__item", html: $("", < text: selectOption.eq(i).text() >) >) .attr("data-value", selectOption.eq(i).val()) .appendTo(selectList); > const selectItem = selectList.find(".new-select__item"); selectList.slideUp(0); selectHead.on("click", function () < if (!$(this).hasClass("on")) < $(this).addClass("on"); selectList.slideDown(duration); selectItem.on("click", function () < let chooseItem = $(this).data("value"); $("select").val(chooseItem).attr("selected", "selected"); selectHead.text($(this).find("span").text()); selectList.slideUp(duration); selectHead.removeClass("on"); >); > else < $(this).removeClass("on"); selectList.slideUp(duration); >>); >);

Input select

Более простой вариант при помощи input. Данный вариант мне нравится больше.

.select < position: relative; display: block; min-width: 220px; width: 100%; max-width: 400px; margin-bottom: 20px; >.select__head < width: 100%; max-width: 100%; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); border-radius: 10px; padding: 14px 15px; font-size: 14px; line-height: 18px; color: rgba(66, 67, 72, 0.8); cursor: pointer; >.select__head::after < width: 10px; height: 6px; background: #FFF url('data:image/svg+xml,%3Csvg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http: //www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4.50495 5.78413L0.205241 1.25827C-0.0684138 0.970375 -0.0684138 0.503596 0.205241 0.215836C0.478652 -0.0719461 0.922098 -0.071946 1.19549 0.215837L5.00007 4.22052L8.80452 0.215953C9.07805 -0.0718292 9.52145 -0.0718292 9.79486 0.215953C10.0684 0.503736 10.0684 0.970492 9.79486 1.25839L5.49508 5.78425C5.35831 5.92814 5.17925 6 5.00009 6C4.82085 6 4.64165 5.928 4.50495 5.78413Z" fill="%23ED266A"/%3E%3C/svg%3E%0A') no-repeat center / cover; position: absolute; right: 20px; bottom: 50%; transform: translateY(50%); content: ""; display: block; transition: .2s ease-in; >.select__head.open::after < transform: translateY(50%) rotate(180deg); >.select__list < display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); border-radius: 10px; margin-top: 5px; max-height: 205px; overflow-x: hidden; overflow-y: auto; z-index: 100; margin: 0; padding: 0; font-size: 14px; color: #424348; scrollbar-color: dark; scrollbar-width: thin; overscroll-behavior: contain; >.select__list::-webkit-scrollbar < width: 7px; background-color: #F8F9FA; padding: 5px; >.select__list::-webkit-scrollbar-thumb < border-radius: 10px; background-color: #D9D9D9; >.select__list .select__item < position: relative; border-top: 1px solid rgba(224, 229, 231, 0.5); padding: 10px 15px; cursor: pointer; list-style-type: none; >.select__list .select__item:hover
jQuery(($) => < $(".select").on("click", ".select__head", function () < if ($(this).hasClass("open")) < $(this).removeClass("open"); $(this).next().fadeOut(); >else < $(".select__head").removeClass("open"); $(".select__list").fadeOut(); $(this).addClass("open"); $(this).next().fadeIn(); >>); $(".select").on("click", ".select__item", function () < $(".select__head").removeClass("open"); $(this).parent().fadeOut(); $(this).parent().prev().text($(this).text()); $(this).parent().prev().prev().val($(this).text()); >); $(document).click(function (e) < if (!$(e.target).closest(".select").length) < $(".select__head").removeClass("open"); $(".select__list").fadeOut(); >>); >);

Проверка открыт ли select

Будем изменять положение стрелки в зависимости от того открыт или закрыт select.

const select = document.querySelector("select"); select.addEventListener("blur", () => selectEvent()); select.addEventListener("click", () => selectEvent()); selectEvent = (event) => < if (event.type == "click") < if (select.classList.contains("change")) < select.classList.remove("change"); >else < select.classList.add("change"); >> if (event.type == "blur") < select.classList.remove("change"); >>;

Если вам понравилась статья про стилизацию select, рекомендую прочитать про Стилизацию чекбоксов.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Поделиться с друзьями:

Статьи из данной категории:

  • JavaScript: Работа с Массивами
  • Наличие Динамически Добавленного Элемента
  • Стилизация Input File
  • Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
  • Стилизация Скролла
  • События Формы

Комментарии ( 5 )

06/05/2020, 23:23

Здравствуйте, спасибо за такой пример и скрипт, но я попробовала его использовать, и заметила недочёты..
1. При загрузке страницы по умолчанию уже должно быть какое-то значение. Это не доработано в скрипте. Мне кажется вот здесь text:
_this.children(‘option:disabled’).text() должно быть не disabled, а
_this.children(‘option:selected’).text()
2. Первый по порядку option считается 0-й, то есть цикл нужно начинать с 0, а не с 1
for (let i = 0; i < selectOptionLength; i++) и т.д..
Иначе в псевдоселект добавляются пункты все, кроме первого
3. Мне кажется, что нужно добавить закрытие псевдоселлекта при клике вне этого блока. Потому, что если селекты расположенны рядом, то могут наезжать друг на друга открытые.
Спасибо!

Only to top
08/05/2020, 10:21

Здравствуйте, Оксана. Спасибо за выявление недостатков скрипта. Как будет время, обязательно код будет исправлен и улучшен.

22/07/2020, 15:00

Здравствуйте! Подскажите, пожалуйста, в чем может быть причина, что не работает js код для селект нигде кроме хрома и сафари?

Only to top
23/07/2020, 07:47
Здравствуйте, Анастасия. Представленный код работает во всех современных браузерах.
11/07/2022, 19:11

если несколько селектов на странице, как сделать что бы был открыт только один? открытый закрывается и открывается по которому кликнули

Стилизация select на CSS

Стилизация select на CSS

Для верстальщика обязательным порядком необходимо уметь стилизовать разные элементы формы. Согласитесь, что вряд ли дизайнер оставит форму, как в браузере, никак не приукрасив.

HTML разметка для select

Тег select поместим внутри тега div с классом select. Создадим две опции, между которыми и должен происходить выбор.

Вот так select выглядит в браузере Chrome, без стилизации. Однако, с помощью CSS стилей, мы слегка его приукрасим: увеличим размер поля, отступы, цвет и стиль рамки, шрифт.

Стилизация select на CSS.

CSS для select

Зададим блоку select позицию relative, делаем мы это для позиционирования кастомной стрелочки, относительно этого блока.

.select position: relative;
>

Стилизуем тег select. С помощью свойства appearance, убираем стандартные стрелочки у элементов формы. Затем добавляем для него вендорные префиксы для браузеров Chrome и Safari нужен –webkit, а для Firefox -moz.

.select select display: block;
width: 100%; /* от ширины блока div */
padding: .75rem 2.5rem .75rem 1rem;/* отступы от текста до рамки */
background: none; /* убираем фон */
border: 1px solid #ccc; /* рамка */
border-radius: 3px;/* скругление полей формы */
-webkit-appearance: none;/* Chrome */
-moz-appearance: none;/* Firefox */
appearance: none;/* убираем дефолнтные стрелочки */
font-family: inherit;/* наследует от родителя */
font-size: 1rem;
color: #444;
>

Воссоздадим убранную стрелочку при помощи псевдоэлемента after, применив разные свойства border. При клике внутри поля, показывается выпадающий список, за исключением при клике по самой стрелочке. Свойство pointer-events: none; отменяет стандартное поведение при клике по элементам, прописав которое, теперь при клике по стрелочке, так же появится, выпадающий список.

.select:after content: «»;
display: block;
border-style: solid;
border-width: 6px 5px 0 5px;
border-color: #000 transparent transparent transparent;
pointer-events: none;
position: absolute;
top: 50%;
right: 1rem;
z-index: 1;
margin-top: -3px;
>

Как вставить дизайнерскую стрелочку?

Ниже, я приведу два варианта, как вставить уникальную стрелочку, при верстке макета, если её нарисовал дизайнер. Вместо стрелочки на CSS, можно добавить стрелочку в виде картинки в пустые кавычки content.

или вставить картинку в виде фона без повтора.

.select select background: url(. ) no-repeat;
>

Демонстрация примера

Стилизация select option

Как вы уже заметили, что тег option, остался не стилизованным. Почему его не нужно стилизовать? Дело в том, что браузеры мобильных устройств, по разному отображают опции выбора и совсем не так, как на десктопных. Поэтому пользователи мобильных телефонов, так и так увидели бы выпадающий список без стилизации.

Заключение

Однако лучшим решением на 2019 год – это конвертировать иконку в SVG формат и вставить фоном. Такой вариант, гарантирует качественное изображение на любых разрешениях и разных масштабах.

В видеокурсе «Вёрстка сайта с нуля 2.0», я показываю на живом примере, как верстать сайт по макету.

Создано 22.05.2019 10:15:50

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 1 ):

    ildar.khasanshin 26.05.2019 20:39:34

    вместо .. .top: 50%; margin-top: -3px; .. лучше .. top: calc(50% — 3px); ..

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

    Стилизация Select с помощью css, как будто это 2020

    Select – этот элемент трудно стилизовать для всех браузеров. Чтобы избегать его недостатки раньше, мы использовали обходные пути, такие как стилизация родительского элемента, добавление псевдоэлементов и даже использование JavaScript для создания подобного элемента управления из различных элементов, которые легче стилизовать. Но обходные пути сложно поддерживать и использовать, не говоря уже о проблемах доступности, которые создают пользовательские элементы.

    Как выясняется, разумный набор стилей для select можно создать согласованно и привлекательно для новых браузеров, не меняясь при этом и в старых.

    Быстрый Пример

    Вот элемент select без стиля . Он будет выглядеть немного иначе, в зависимости от браузера, который вы используете.

    Ниже представлен тот же элемент select, стилизованный непосредственно с помощью CSS. Никаких дополнительных элементов обертки или псевдоэлементов не требуется (за исключением одного, который необходим для IE10 +):

    Код

    HTML-код для приведенного select приведен ниже. Обратите внимание, что CSS применяется к любому select с классом select-css.

     

    А вот CSS, управляющий select:

    .select-css < display: block; font-size: 16px; font-family: sans-serif; font-weight: 700; color: #444; line-height: 1.3; padding: .6em 1.4em .5em .8em; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; border: 1px solid #aaa; box-shadow: 0 1px 0 1px rgba(0,0,0,.04); border-radius: .5em; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%; >.select-css::-ms-expand < display: none; >.select-css:hover < border-color: #888; >.select-css:focus < border-color: #aaa; box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #222; outline: none; >.select-css option < font-weight:normal; >*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css

    Примечания по CSS

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

    • Select Устанавливается на display: block; по умолчанию, но вы можете поменять его, display: inline-block; width: auto; если хотите, чтобы он сидел рядом с label.
    • Фон select создается с использованием двух фоновых изображений: первое — это значок стрелки svg (выраженный в виде URI данных), а второе — повторяющийся линейный градиент. Любой URL может быть внешним изображением, если хотите. Если вы меняете изображение значка, имейте в виду, что его размер установлен в первом разделе последующего background-size: .65em auto, 100%; свойства. И его положение задается через background-position: right .7em top 50%, 0 0;(который находится .7em с правой стороны, соответственно). Кроме того, если размер изменяется, вы можете захотеть сделать более правый отступ для кнопки, чтобы она не перекрывала select текст, но имейте в виду, что в IE9 и более ранних версиях пользовательская стрелка не появится и браузер по умолчанию Стрелка будет отображаться слева от отступа, поэтому не добавляйте слишком много, иначе стрелка IE9 будет вставлена ​​очень далеко.
    • Важно сохранить линейный градиентный фон, потому что его наличие на самом деле мешает IE9 и старше распознавать свойство background, и в результате он не будет показывать пользовательский значок рядом со своим невидимым собственным. Если вы хотите плоский цвет, используйте линейный градиент между двумя одинаковыми значениями цвета.
    • Appearance Правило и его и приставочные версии имеют важное значение, чтобы сбросить стили некоторых браузеров по умолчанию.
    • font-size: 16px; Правило важно , потому что IOS Safari будет увеличивать его в макете сайта , если select текст меньше 16px. Обычно такое поведение раздражает, поэтому мы стараемся избегать его с размером шрифта 16 пикселей на select.
    • .select-css::-ms-expand Правило предписывает IE11 и IE10 , чтобы скрыть псевдоэлемент меню значка, поэтому может появиться пользовательский значок позади него.

    Как это выглядит в разных браузерах

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

    Наслаждайтесь!

    Обновление статьи 3.06.20

    Стилизация пунктов option

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

    1. С помощью jquery

    2. С помощью стилизации label со скрытыми input

    3. С помощью списка li и скрытого input

    Стилизация — это конечно хорошо, но доступность нужна не меньше.

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

    И это все. Спасибо за прочтение.

    Добавить комментарий

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