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.