Why a CSS alternative to <select> is impossible

A couple of weeks ago, I came across an article from Pepsized featuring a CSS-only alternative to the Select Element. Sounds nice! Especially since I recall doing some dropdown styling at Codrops.
Yeah, it’s very nice. Even if it’s not an alternative t…

A couple of weeks ago, I came across an article from Pepsized featuring a CSS-only alternative to the Select Element. Sounds nice! Especially since I recall doing some dropdown styling at Codrops.

Yeah, it’s very nice. Even if it’s not an alternative to the Select Element. This is not possible. You cannot do a pure CSS alternative to the Select Element.

There is more than just a click on a button opening a list of options to the element. Let me clear things up point per point.

Accessibility

The major concern here is accessibility. The default element Keyboard: use the tab key to focus the element Keyboard: press enter

  • Mouse: move your cursor over the desired option Keyboard: use the top and bottom arrow keys to pick an option
  • Mouse: click on the desired option Keyboard: press enter
  • While making a pure CSS dropdown easily usable with the mouse can be done by pretty much any one with some CSS knowledge, making it usable with keyboard navigation is a whole other story.

    However, it’s doable. You won’t have exactly the same process as above, but you’ll probably be able to pick your option with the arrow keys and such.

    Anyway, this introduces some new behaviour (you may call this inconsistencies) for people who can’t use a mouse. Yes, not having to press enter (steps 2 and 4) is probably no big deal for you and I, but for — let’s say — a blind user, it may be confusing.

    Mobile devices

    Mobile devices can become another problem with a home-made with dozens of options like a dropdown to pick your country, having a mobile-friendly UI can make the difference between a user who buy/subscribe and a user who leave.

    Processing

    In most cases, as a developer you will use a element is a form element, it comes with a name attribute and the ability to send POST or GET data through a form. This means you can access the selected option by no more than $_POST['name-of-select-element'] in PHP. With JavaScript, it will probably be something like document.getElementById('name-of-select-element').value;.

    Fine. Now let’s do this with CSS only. Uh-ho, not possible. If you’re clever enough, you’ll come up with a solution involving hidden radio inputs within your list items. Sounds fair enough; so… you end up using multiple form elements… not to use a form element. Right?

    Let’s say you don’t mind the extra-processing that comes with the multiple radio buttons compared to the regular element

  • it adds even more code to your page, slowing it down
  • Performance

    Even if it’s not much a concern, using a HTML/CSS “alternative” to the