<select>
<option>This
<option>That
<option>And the other thing
</select>
<p>
The separator between the last two options only works in Chrome, Safari, and other Webkit/Blink browsers. It looks like this:
</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/183091/hr-inside-select-screenshot.png" alt="Screenshot of a divider between “That” and “And the other thing” in the MacOS dropdown menu. It’s a subtle gray line that spans the full width." width="209" height="118">
<!-- This works too, but it’s a very subtle separator.
<select multiple>
<option>This
<option>That
<option>And the other thing
</select>
-->
<p>(Needs testing on Windows Chrome, Android Chrome, and iOS Safari.)</p>
html {
display: table;
height: 100%;
width: 100%;
font-family: Helvetica, sans-serif;
}
body {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 1em;
}
var select = document.querySelector('select');
var hr = document.createElement('hr');
select.insertBefore(hr, select[select.length - 1]);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.