Is there a way to style a checkbox or radio button with pure css i.e. using class?

Question

Is there a way to style a checkbox or radio button with pure css ie class="newstyle" without jQuery? I've been searching the web, and I wondering if there is a way to achieve this with only class="" attribute. Here's an example: http://www.filamentgroup.com/examples/customInput/

EDIT: My current way of achieving this:

<div class="styled-checkbox">
 <input type="checkbox" id="checkbox1" value="1" />
 <label for="checkbox1"><span></span>Test</label>
</div>

However, not sure if this is the correct way to achieve this, from a compatibility perspective, in addition, the div needs a pre-set width by default, if auto it will fill the DOM.

Answer 1

You can achieve the desired effect with just one class, but it's wrong to say that you style the checkbox, because it cannot be directly styled via CSS. This is because the component is controlled by the operating system, and not by the browser itself.

The way around is to use a set of normal elements to simulate the checkbox appearance.

In your specific example from the link you provided, the checkbox is completely hidden because it stays behind it's label via z-index , which has a background containing an improved version of checkbox graphic. Combined with the fact that if you use id \\ for attribute pair for the checkbox and for the label, while you click on the label (which displays the image of a checkbox) the checkbox will change it's checked/unchecked state.