CODEWITHSUNDEEP
htmlcsscheckbox
sunjie
sunjie

Reputation: 2053

CSS Style for Checkboxes

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?

Upvotes: 2

Views: 7541

Answers (3)

Spudley
Spudley

Reputation: 168803

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.

Upvotes: 7

Iladarsda
Iladarsda

Reputation: 10692

You can style it with CSS3(Chrome or Safari only!), but for anything esle - no other way that js.

There are 40+ examples here: FORMS ENHANCEMENTS DEMOS

There are some plug ins - I used to use jNice - not just pure CSS3 for modern browser and standard checkbox/dropdown for anything else.

Best Regards,

Pete

Upvotes: 3

mingos
mingos

Reputation: 24532

No, it is not possible. The appearance of the checkboxes is OS- and browser-specific. Only JavaScript-based solutions let you style them in a way that will work across all browsers.

You might like this plugin. It's easy to use and gives satisfying results.

Upvotes: 6

Related Questions