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?
2
-
You should paste your code here alsoShakti Singh– Shakti Singh2011-06-29 11:32:27 +00:00Commented Jun 29, 2011 at 11:32
-
I'm not sure about "without using javascript". The common approach is replacing html checkbox with a custom "checkbox" with help of javascript. The example of this way is variety of jQuery plugins, for instance, alt-checkbox.starikovs.comstarikovs– starikovs2013-03-11 08:59:29 +00:00Commented Mar 11, 2013 at 8:59
Add a comment
|
3 Answers
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.
4 Comments
Ruslan
+1 for using jsFiddle's images :) however, as the question mentions cross-browser compatibility, perhaps the answer should be "NO".
Spudley
@Bad: Well, technically it does work in IE... IE9 that is. He didn't actually specify which versions he wanted to support ;) But you're right of course, IE8 is the minimum realistic standard one needs to support these days (possibly IE7 or even IE6 if your boss is masochistic). But I was careful to explain the caveats and give a minimalist JS solution that uses the same basic approach for older browsers. :) Using Modernizr or similar, you could of course check for compatibility before deciding whether to use pure CSS or the JS solution. But of course, Modernizr itself is a JS solution. heh.
Stephen Way
This did not work for me in IE7. It only seems to work if the input is anything but display: none;
Spudley
@sway - you could try
visibility:hidden; instead, I guess. Not quite the same, but worth trying?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.
Comments
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
