Разделители внутри тега select

Предположим, Вам нужен дизайн разделителя между опциями в меню <select>.

Насколько это может быть сложно?

Фэйк-подход с <option>

Это то, что вы обычно видите на StackOverflow:

<select name="because-you-are" required>
  <option value="provocative">One great thing</option>
  <option value="fascinating">And another great thing</option>
  <option disabled value="">__________</option>
  <option value="robotnik">That’s two great things</option>
</select>

К сожалению, этот хак не идеален:

• Вы не можете знать, насколько широко будет отображаться меню, особенно на мобильных ОС, поэтому поддельный разделитель из подчеркиваний может плохо выглядеть.
• Вы не можете знать, каким шрифтом он будет отображаться, поэтому, возможно, подчеркивания не образуют непрерывную линию.
• Ассистивная технология не будет объявлять поддельный разделитель как один, в худшем случае говоря «подчеркивание подчеркивание подчеркивание …» (вы не можете добавить role=»separator», к сожалению.)

Странная функция WebKit / Blink

Если <hr> вставляется между элементами <option> с помощью скрипта, то он отображается как собственный разделитель раскрывающегося меню (по крайней мере, на MacOS):

Как ни странно, это не работает, если он находится в исходном HTML.

Стоит отметить, что это одна из тех функций, которые запросила команда Apple Mail, как старый -webkit-line-clamp. Однако, в Windows этот разделитель все-равно не отрисовывается.

Возможно, это может работать в стандартном HTML, без требования сценариев. <menu type=»context»> допускает <hr> потомков для этого эффекта, в конце концов.

Но это всего лишь специфическое любопытство. Что еще мы можем сделать?

Работа в ограниченной веб-семантике с <optgroup>

Вы хотите разделить выпадающий список на части, да? Ну, единственный реальный способ HTML сделать это — <optgroup>. Это не сепаратор, но он равносилен тому — что <section> в <hr>, вроде.

<select name="handsomest">
  <optgroup label="The Brothers Strong">
    <option>Strong Sad</option>
    <option>Strong Mad</option>
    <option>Strong Bad</option>
  </optgroup>
  <option>The Cheat</option>
</select>

<optgroup> требует атрибута label. Например, посмотрите на все разделители в этом типичном меню” Правка » в Mac OS:

Не могли бы вы дать краткое, точное название каждой из этих групп? Что еще более важно, помогут ли они пользователю вообще, или они будут словесным беспорядком?

Единственное реальное решение — меняйте свой дизайн. Или используйте плагины для кастомизации селектов. Но не надейтесь на кросс-платформенность.

Источник: codepen