Honestly I don’t care about how it’s done, just tell me what it is!

OK, this post shows you how to create this, a CSS/HTML dropdown menu for a form.

On my continuing quest to reduce the amount of Javascript I’m using for UI display/formatting, I wanted to create a pure CSS dropdown menu for use in a form, using radio buttons to store the values. Since I’m a nice person and all I thought I’d share this with you. All of this is available as a gist, and there’s an example here

Make it exist

First, lets create a bit of basic HTML. This contains all the form stuff etc.

We’re going to use the ‘ul’ as our dropdown, we use labels on the radio buttons because the buttons themselves will be hidden, the labels give a clickable area.

Make it pretty (kinda)

Now we’re going to add a few styles to the default page. Nothing fancy, just enough to demonstrate the basic behavior.

So we’ve highlighted the dropdown and hidden the radio buttons, you can click the labels to change the values but it’s still not a dropdown.

Make it do what we want it to do

So we need to do a couple of CSS tricks to get it to work. First, lets use the :hover selector to display all of the items when the mouse is over the dropdown. This gives us the ‘dropdown’ effect. Then, we’ll use the ‘+’ selector and the :checked selector in the CSS code to select the element after the specified element. This lets us show the selected option always, I.E. find the checked radio button, find the next ‘span’ element and make it visible.

You can see a working example here. There’s also a “pretty” example using Bootstrap here. I haven’t done any cross browser testing so not sure where this will work, appears to be fine in Firefox 9 but feel free to leave a comment below if it isn’t working and I’ll try and build up a list.

All code in this post is licensed under GPL3