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

Oct

7

Custom Checkboxes, Radio Buttons, Custom Select Lists

By: OSH Editorial    In: CSS Forms Javascript

eziCMS an almost complete fresh CMS skin

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: OSH Editorial

No Bio yet...

Share this Story

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

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

February 4, 2012

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!