<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]);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.