TFA mentions `optgroup` too, wouldn't it make more sense to use that and style it similarly? Especially if `hr`-in-`select` is only going to work in Safari anyway(?).
[0] https://html.spec.whatwg.org/multipage/form-elements.html#th... (see the "Content model" line)
[0] https://www.mozilla.org/en-US/firefox/122.0/releasenotes/#no...
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/se...
For those without iOS, see an example here: https://ibb.co/DkN16Gc
And please, just give us an attribute that adds a search bar... I don't want to use 30 KB of JavaScript just to have selects that feel like they're from this millennium, especially since those then don't work too well on mobile…
That's the datalist html element.
(Note though that you aren't limited to Ctrl-clicking. There's Shift-clicking, too, as well as mouse lassoing. Assuming your UA supports it, that is.)
On desktop (Chrome on Mac) each optgroup label is just a disabled item, and then its options are indented menu items below it.
It looks totally hacky -- the name of a group shouldn't seem like "disabled" option, nor are indentations in menu items an established convention.
That sheet on iOS is perfectly intuitive, however.
[1] Link to page section with demo: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/se...
Why not just make horizontal rules between optgroups the default?