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

Oct

7

Custom Checkboxes, Radio Buttons, Custom Select Lists

By: Mark Dijkstra    In: CSS Forms Javascript

http://www.opensourcehunter.com/2008/10/06/custom-checkboxes-radio-buttons-custom-select-lists/

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.

x

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: Mark Dijkstra

Mark Dijkstra is the founder and main writer of OpenSourceHunter. He's also a passionate freelance web developer and designer. Mark is one of those people that spend too much time on the internet to keep up with all of the trends and tools.
You can follow Mark on twitter @ MarkDijkstra

Share this Story

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

Share

7 Comments

Phasy

October 6, 2008

And it even works in Google Chrome :)

Stuart

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).

Greetz

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.

Greetz

balaji

October 25, 2008

great!
Stumbled!

mrdata

January 21, 2009

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

Jerry

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;
onchange=this.form.submit();
}
}
}
}

Add Your Comment

Your name

March 11, 2010

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!