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 i.e. 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.

quick google search landed me here: http://cssdeck.com/labs/css-checkbox-styles and here: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ good luck — Evan Layman, Feb 22 '13 at 18:37
Possible duplicate: http://stackoverflow.com/questions/3772273/pure-css-checkbox-image-replacement — NewUser, Feb 22 '13 at 18:53
Not really - form elements are generated by the OS, not the browser and have always had limited styling capabilities. — Diodeus - James MacFarlane, Feb 22 '13 at 18:55
@EvanLayman I've seen those links...already, unfortunately they use
, I am not sure if that is the recommended way? Or? — John Smith, Feb 22 '13 at 19:45
Anyone? I would like to know if this method is OK or not? Thanks! — John Smith, Feb 22 '13 at 20:05

score 0 · Accepted Answer · answered Feb 22 '13 at 20:34

0

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.

answered Feb 22 '13 at 20:34

Corneliu

1,110
1
10
16

Yes, I understand all of this. However, my concern is long-term compatibility and method for manipulating design, are DIVs correct to use? Just out of curiosity. Thanks in @Corneliu – John Smith Feb 22 '13 at 20:52
After doing more research, I guess this is the only way, thanks for you effort folks! – John Smith Feb 23 '13 at 19:36
Thanks folks! Love this site! – John Smith Feb 23 '13 at 19:48

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

1 Answers1