So the design calls for a separator between options in a
How hard could that be?
This is what you usually see on StackOverflow:
<!-- This will work poorly, see below --> <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>
Unfortunately, this hack goes bad in a hurry:
You can’t know how wide the menu will be displayed, especially on mobile OSes, so the fake separator made of underscores may wrap.
You can’t know what font it will render with, so maybe the underscores won’t form an unbroken line. (Other Unicode characters have even patchier results.)
Assistive technology won’t announce the fake separator as one, in the worst case saying “underscore underscore underscore underscore…” (You can’t add
Bizarre WebKit/Blink feature
<hr> is inserted between
<option> elements via script, then it displays as a native dropdown menu separator (at least on MacOS):
Strangely, this doesn’t work if it’s in the source HTML.
If I had to guess, this is one of those features that the Apple Mail team requested, like weird old
-webkit-line-clamp. Windows doesn’t even have separators in its dropdowns, after all.
Maybe this could work in standard HTML, without the scripting requirement.
<menu type="context"> allowed
<hr> children for this effect, after all.
But this is just an engine-specific curiosity. What else can we do?
Work within limited Web semantics with
You want to divide a selection menu into pieces, huh? Well, the only real way HTML can do that is
<optgroup>. It’s not a separator, but it’s functionally equivalent — what
<section> is to
<hr>, sort of.
<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> requires a
label attribute though, so you’ll have to name your groupings — easier said than done. For example, look at all the separators on this very typical “Edit” menu from MacOS:
Could you give a succinct, accurate name for each of these groups? More importantly, would they help the user at all, or would they be verbal clutter? Apple’s advice suggests they’re just clutter:
Use separator lines to create visually distinct groups of related menu items. The number of groups to provide is partly an aesthetic decision and partly a usability decision.
The only real solution
There’s always the most robust, accessible way: change the design.
Changing a design because of software limitations may seem like admitting defeat, but remember: serifs exist because of inkbrush/stonecutting limitations.