CSS Style for Checkboxes

Question

Is it possible to style the HTML checkbox without using javascripts? This code for example will work fine with IE, but not on Firefox or Chrome. http://jsfiddle.net/5wJxF/ Any suggestions?

Answer 1

YES. It is possible.

You can't directly style the checkbox element, but the effect you're looking for can be achieved if you use a <label> element in conjunction with the checkbox, and style that.

<input type="checkbox" id="field1" class="mycheckbox" />
<label for="field1" class="mycheckbox-label">Label here</label>

And then your CSS would look like this:

.mycheckbox {
  display:none;
}

.mycheckbox + label {
  padding:20px; /*or however wide your graphic is*/
  background:url(/fancy-unchecked.gif) no-repeat left center;
}

.mycheckbox:checked + label {
  background:url(/fancy-checked.gif) no-repeat left center;
}

Here is a working example: http://jsfiddle.net/TVaPX/ (tested with Firefox 5)

The trouble with this approach is that it only works in modern browsers. Older browsers may not support the :checked or + CSS selectors. But if you're okay with not supporting older versions of IE, then this will work. The example above does not work in IE8 (it supports + but not :checked).

If you're not comfortable with that, then you'll have to stick with a Javascript solution.

However, with an approach similar to this, you can still do it with very minimal amounts of Javascript code: simply have a one-line JS that toggles the class of the checkbox when it's checked, and you can use all the above code, but with the alternate classname instead of the :checked selector. That will work in IE7 and IE8.

Hope that helps.