This is a failed experiment. Do not use. It is only posted here, in the hopes that someone else may be able to fix its issues.
- It is impossible to reliably detect when the
<select>is closed, so when the menu is closed with no selection,
aria-pressedlingers until the button is unfocused.
- Uses a regular
<select>menu, ensuring it works well on a variety of devices
- Accessible (?)
- Tiny (3K uncompressed and unminified!)
<drop-down> <button>Click me</button> <select> <option>One</option> <option>Two</option> <option onclick="alert('hi')">Three</option> </select> </drop-down>
With customized menu label:
<drop-down> <button>+</button> <select aria-label="Create new…"> <option>Document</option> <option>Sheet</option> <option onclick="alert('hi')">Picture</option> </select> </drop-down>