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

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

Как трудно это может быть?

#Поддельный `<option>`подход

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

К сожалению, этот хак проваливается в спешке:

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

#Bizarre WebKit / функция Blink

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

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

Если бы мне пришлось угадывать, это одна из тех функций, которые запрашивала команда Apple Mail, как странно старые -webkit-line-clamp. В конце концов, в Windows даже нет разделителей.

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

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

#Работать в рамках ограниченной семантики Web с`<optgroup>`

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

<optgroup>требует labelатрибута, так что вам придется называть свои группы - легче сказать, чем сделать. Например, посмотрите на все разделители в этом очень типичном меню «Редактировать» из MacOS:

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

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

- Анатомия меню § Организация пунктов меню | Руководство по интерфейсу пользователя MacOS

#Единственное реальное решение

Всегда есть самый надежный и доступный способ: изменить дизайн.

Изменение дизайна из-за ограничений программного обеспечения может показаться допустимым поражением, но помните: засечки существуют из-за ограничений чернил / вырубки камней.

Источник

https://codepen.io/tigt/post/separators-inside-the-select-element

Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на:
скайп: olegg.pann
telegram, viber - +380937663911
додавайтесь у телеграм-канал: t.me/webyk
email: oleggpann@gmail.com
ми у fb: www.facebook.com/webprograming24
Обов`язково оперативно відповімо на усі запитіння