CSSPLAY

CSS DEMOS › A CSS alternative to a form select list

Date : 18th November 2013

For all modern browsers

Replace your drab form select lists such as ..

Select car manufacturer Honda Hyundai Lexus Mazda Mitsubishi Nissan Toyota

.. with a CSS styled alternative

The radio buttons above would normally be hidden from view.

Honda Hyundai Lexus Mazda Mitsubishi Nissan Toyota

Information

Tired of the limited styles available for form select lists?

Do not want to resort to the jQuery/javascript methods?

Then perhaps this alternative using just CSS is of interest.

Instead of using a select list I have changed this to a set of radio inputs and styled their associated labels to look like a select list.

Normally the radio inputs would be hidden from view but I have left them on show so that you can see them change with each selection from the list.

Click the top level 'Select Car Manufacturer' to show the 'select list', then click the car you want. The 'select list' will collapse and the chosen car will now be shown with its logo as the selected item.

If you click the 'select list' again you will see you chosen manufaturer highlighted in the list.

So an alternative to the noral select list which can be styled any way you like, and all done with just CSS.

This does work in IE9 but the list does not collapse until you move the mouse off the droplist.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.