Styling checkboxes, radio buttons and dropdowns

Question

How can I style HTML checkboxes, radio buttons and dropdowns? Or can I?

I\'d like to use an image for checkboxes or radiobuttons, and the same for lists - the dropdo

Answer 1

Most likely you won't be able to, it is very difficult. Personally, I would just stay away from that.

Answer 2

I believe CSS 3 will allow you to style those elements, but for now it isn't directly possible.

See this question: CSS checkbox input styling

Answer 3

You can't put an image as a checkbox, but you can always build your own checkbox :D.

Put a hidden field and an image, add an "onclick" event over the image. When the onclick is fired check the status of the hidden field, change the image according to the status and save the status of the checkbox in your hidden field.

You should check for custom javascript libraries. One of my favorities is http://www.dojotoolkit.org/

Answer 4

This guy pretty much has all the styling you can put on form controls, but it's not consistent across browsers. You are going to have to go custom. Use a custom image for the checkbox, then change it's source to get the clicked version (and vice versa). The select menu might be a little trickier. I hope there's a jQuery plugin out there that can help you!

Answer 5

Recently i come across amazing WTF, forms? from a creator of Bootstrap Mark otto. It has great styles for

• Checkbox
• Radio button
• Select
• Progress bar
• File Browser

Checkout http://wtfforms.com/

Answer 6

You can style form elements, but it is difficult (impossible?) to get a consistent style across browsers and operating systems with a pure CSS approach. Some script manipulation of styles would also be required.

This is a very good article that discusses the options and issues: Styling form controls

Listamatic has a great collection of CSS list styles.