Custom <select>

Here’s a recipe for transitioning and customizing a <select> element.

The HTML:

<select>
  <option hidden>Choose…</option>
  <optgroup label="Group A">
    <option>One</option>
    <option>Two</option>
  </optgroup>
  <optgroup label="Group B">
    <option>Three</option>
    <option>Four</option>
  </optgroup>
</select>

The CSS:

Here’s some highly stylized ones on Codepen that also show how to put custom stuff into the options and selected state.