Стилизация Select-Option (почти) без JavaScript

[KYuri]

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

[Kornerupin]

Хорошая мысль, большое спасибо.

Действительно не подумал об этом моменте, постараюсь придумать что-то, чтобы решить и эту задачу.

[Kornerupin]

Тут важно отметить, что я пытался решить проблему стилизации, когда для этого используется простой список (ul, li).

Данный вариант куда лучше, поскольку всё вышеописанное реализовать проще, чем ещё и базовый функционал (активацию при клике, переключение как в радиокнопках (отключение предыдущего активного пункта при активации текущего), отправка на сервер, обязательность и т.д.)

[dom1n1k]

Попытка интересная, но в проде этим пользоваться нельзя. Совсем.
— не работает клавиатура
— на мобильнике не работает нативный контрол
— выпадающий список влияет на размеры страницы и положение скролла, всё дергается
— список не умеет выпадать вверх, если снизу край вьюпорта

[Kornerupin]

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

<ul>
<li class=«active»>Option < /li>
<li>Option </li>
</ul>

Связка input+label требует куда меньше доп. кода, чем ul-li, и именно об этом статья.

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

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

Все перечисленные Вами моменты — важны, но требуются совсем не всегда. Если они нужны, разумеется JavaScript код станет больше.

[tXwnik]

при кастомизации нативных html элементов, нужно в первую очередь думать над доступностью, о которой писали выше (скринридеры, навигация по клавиатуре, отображение на различных устройствах). Идея интересная, но, увы, не юзабельна :(

[vism]

Ожидание
Стилизация Select-Option (почти) без JavaScript

Реальность
Тяп ляп, абсолютно не Select-Option, зачем оно надо такое.

Заходишь порой в проект, а там кулибины наворотили такого вот, потом бедный заказчик не понимает, почему не 5 минут поправить мелочь, а час.

[Igor_307]

Добавил в избранное. Как нибудь применим

[kirillbdev]

Неплохо, но на мой взгляд все эти кастомные контролы без использования js ломаются о суровую реальность «закрытия по клику на body» )

[Padreramnt]

Есть самая главная проблема: полностью отбитая поддержка required у обеих реализаций.

В обычном случае: если выбрать value='' то селект считается пустым и необходимо заполнить

<form>
  <select name='' required>
    <option value=''>select option placeholder</option>
    <option value='1'>option 1</option>
    <option value='2'>option 2</option>
  </select>
</form>

В случае с радиогруппой: проверяется только факт наличия выбранного инпута, value='' является корректным значением, так как задаётся разработчиком напрямую

<form>
  <input name='gr' type='radio' value='' checked /><!-- already checked -->
  <input name='gr' type='radio' required value='1' /><!-- require check ignored -->
  <input name='gr' type='radio' required value='2' /><!-- require check ignored -->
  <button>send</button>
</form>

В случае с чекбоксом: в HTML нет такого понятия как группа чекбоксов, required работает только непосредственно на сам чекбокс. Чекбокс группы никогда не будет, вообще, 0, точка,. (везде есть а HTML особенный)

<form>
  <input name='gr' type='checkbox' value='1' required /><!-- must be checked -->
  <input name='gr' type='checkbox' value='2' required /><!-- must be checked -->
  <input name='gr' type='checkbox' value='3' required /><!-- must be checked -->
  <button>send</button>
</form>

Но...

… мы то все прекрасно понимаем, что наличие всяких там name/value/required/checked/form и прочих легаси атрибутов это моветон, скучно и никому не интересно, у нас же есть {Framework}JS! Балом правят всякие ng-form билдеры, код вида this.setState({… }) и вот это вот всё

Закрывание по клику в body решается крайне просто через :focus-within и небольшим скриптом, который на esc будет сбрасывать фокус.

Accessability вполне можно наваять при помощи aria-*, но это не точно, не сталкивался, не знаю, я мимокрокодил, рядомстоял, из одного уха влетела.

После долгих изысканий в дизайне и функционале в лучше просто оставить select как есть, игра не стоит свеч.

Спасибо за внимание

[Kornerupin]

1. Required прекрасно работает в случае с радиокнопками.

Для корректной работы достаточно, чтобы хотя бы у одной из радиокнопок (с одинаковым атрибутом name) был установлен required, и НЕ ЗАДАНО НИ ОДНОГО checked. В этом случае браузер, как и с остальными элементами, потребует выбрать.

2. Required, почему-то, и правда некорректно работает с чекбоксами.

Причём об этой проблеме авторам спецификации давно уже сообщили, но они заявили, что менять ничего не будут.

Что ж, это всего лишь означает, что потребуется немного больше JavaScript.

---

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

<ul>
  <li>Option 0</li>
  <li>Option 1</li>
</ul>

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

[vital72]

событие "onchange"?

свойство "selectedIndex"?