Wednesday, November 13, 2013

Styling checkboxes, radio buttons and file uploads

Unfortunately there is still no standard and cross-browser css styling for some basic html elements. Styling checkboxes, radio buttons and file uploads usually needs some javascript magic... or does it?

Checkboxes and radio buttons

I found a great page that utilises css to style these elements. The only caveat is that you have to make sure that your html code is built exactly as the examples it provides.

Link: http://csscheckbox.com/

File upload

For the file upload you need jqurey. I tried a few and this was the simplest one I found:
http://www.appelsiini.net/projects/filestyle

Example


Bonus: Textarea tricks


I found a great article about styling textareas here: http://css-tricks.com/textarea-tricks/