So the design calls for a separator between options in a <select> menu.

How hard could that be?

The fake <option> approach

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>

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 role="separator", sadly.)

Bizarre WebKit/Blink feature

If an <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 <optgroup>

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>
  <option>The Cheat</option>

<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:

A system-wide MacOS Edit menu that groups Undo/Redo, Cut/Copy/Paste/Delete, Select All, Find in This Page…/Find Again, and finally Start Dictation…/Emoji & Symbols.

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.

Menu Anatomy § Organizing Menu Items | MacOS Human Interface Guidelines

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.

2,122 2 8