Native select

⚠️ Your browser does not support natively styled dropdowns and will use system styles.

Custom-styled select

Note: Focus management and keyboard navigation is not implemented in this CSS-only example.
  • Opening should cause the selected, or the first selectable item to be focused.
  • Closing (popover toggle, Esc, selection) should move the focus back to the button.
  • Every option should get tabindex="-1" except the active one, which gets tabindex="0". Roaming tabindex (using arrow keys) should be used.

Small

  • Dog
  • Cat