drag and share
  • Twitter
  • Delicious
  • Facebook
  • Digg
  • Reddit
  • Stumbleupon

Custom Checkboxes, Radio Buttons, Custom Select Lists

By: OSH Editorial    In: CSS Forms Javascript

Karma - Responsive bootstrapped webapp

Have you ever wanted to use your own images for checkboxes, radio buttons or select lists? This script will let you do that. Easily. The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements. This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others.

Hello you, if you are new here, you might want to subscribe to our RSS feed for updates on this article and our site.


In Internet Explorer, the select lists are unstyled, but the checkboxes and radio buttons still look and function beautifully.

This JavaScript and CSS will allow you to use custom images for checkboxes, radio buttons and select lists.

See a demo here

Written by: OSH Editorial

No Bio yet...

Share this Story

If you enjoyed reading, consider sharing the love with the rest of the world.



October 6, 2008

And it even works in Google Chrome :)


October 6, 2008

They look absolutely great – the only problem is, they don’t seem to be keyboard accessible…

The Hunter

October 6, 2008

@Phasy -
Yes this works in Google’s Chrome(most of the stuff works great on Chrome).


The Hunter

October 6, 2008

@Stuart -
Yes i know but you can send the creator an email about this and with some luck there will be a version that does have keyboard accessibility.



October 25, 2008



January 21, 2009

looks great… but it doesn’t work with onchange event… =/


March 11, 2009

just add a code at the bottom

choose: function() {
option = this.getElementsByTagName(”option”);
for(d = 0; d < option.length; d++) {
if(option[d].selected == true) {
document.getElementById(”select” + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;

Add Your Comment

Your name

May 22, 2019

We use Gravatars on OpensourceHunter, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too. Get your Gravators account here!