CSS - Styling Checkboxes, Radio buttons & dropdowns

Question

how can i style html Checkboxes, Radio buttons & dropdowns? or can i?

eg. can i use an image for checkbox/radio button? same for lists - the arrow down button thingy is not nice most of the time?

Answer 1

Short answer: You can't do it nicely and consistent.

The answer you might want to hear, depending on your situation: Use jQuery or something similar, which will give you plenty of plugins to choose from.

These two are some of the better ones, as it will let you style just about all of the different controls.

Answer 2

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

See this question: http://stackoverflow.com/questions/1120879/css-input-styling

Answer 3

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.

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

link :

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements

Answer 6

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 7

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