Style a HTML checkbox?

[meinsla]

Is it possible to use CSS to stylize checkboxes as you can with any other form element, without using javascript

[OctoberWind]

well... a 30 second test tells me that inline styling like this:

<input type="checkbox"  style="background-color:#00FF00; border: solid 1px #006699; border-bottom: dashed 3px; #000;" />

Works in IE7, but not FF2 or Safari for Windows. FF3 untested.

[Major Payne]

Proof :P : Styling checkboxes with CSS

Screen shots of styles in different browsers and operating systems.

[meinsla]

So nothing that works in FF, I assume.

[thealexbaron]

So, basically, styling checkboxes is not a very good option?

I saw a thing on styling them with Jquery... maybe I should do that?

[bigirl]

For a long time I found solutions on the web that required too much code (JavaScript & Css).

While reviewing those solutions, few things stood out:
• Necessity of a background image – since it is a styled checkbox and has to have the flexibility of changing its border, background and the “v” color.
• Problem hiding the checkbox (via Css) and replacing it with span or div. It required moving any script attached, from checkbox to its replacement.

Solution: div with background image wraps a transparent checkbox.

It was tested on Windows XP in browsers:
- IE7 & 8
- Firefox 3.5.9
- Safari 4.0.5(531.22.7)
- Google Chrome 4.1

I’ll be thankful if someone could run this solution on Opera & other OS, so that the title of this post will be a correct one.
View my solution here and please let me know what you think.

[Alt_F4]

@bigirl - AWESOME solution - love it, love it - such a simple way to solve this problem!!

Here is my jQuery version of your javascript.
It wraps each checkbox in the wrapper div
Assigns the 'checked state' class if the checkbox is supposed to be checked
and toggles the 'checked state'

$(document).ready(function() {	 	
	$('input[type=checkbox]').each(function() {
		$(this).wrap(function() {
			return ($(this).is(':checked')) ? '<div class="custom_checkbox selected" />' : '<div class="custom_checkbox" />';
		});
	});
	
	$('.custom_checkbox input[type=checkbox]').click(function () {
		$(this).parent().toggleClass('selected');
	});
});

FYI:

Tested on Windows 7 in:
- IE8
- FF 3.5.9
- Safari 4.0.5
- Chrome 5.0

All working!

[Niku]

why you don't use jquery for this ?

[jdak]

For a long time I found solutions on the web that required too much code (JavaScript & Css).

While reviewing those solutions, few things stood out:
• Necessity of a background image – since it is a styled checkbox and has to have the flexibility of changing its border, background and the “v” color.
• Problem hiding the checkbox (via Css) and replacing it with span or div. It required moving any script attached, from checkbox to its replacement.

Solution: div with background image wraps a transparent checkbox.

It was tested on Windows XP in browsers:
- IE7 & 8
- Firefox 3.5.9
- Safari 4.0.5(531.22.7)
- Google Chrome 4.1

I’ll be thankful if someone could run this solution on Opera & other OS, so that the title of this post will be a correct one.
View my solution here and please let me know what you think.

Hello! Signed up just to say thankyou to bigirl and Alt_F4. I'm hoping this technique can help me style my <input type="file"> as well. Alt_F4, I used your jQuery but i think it was better with <span> instead of <div>. I was getting a line break with divs on a few of the spots.

[Kor]

Not a bright idea to style the checkboxes and radio buttons. After all, they are strictly functional elements, and there is no serious reason to style them. To style what? A very small square? An even smaller circle?

[adamwydeman]

Not a bright idea to style the checkboxes and radio buttons. After all, they are strictly functional elements, and there is no serious reason to style them. To style what? A very small square? An even smaller circle?

Only a programmer would say something like that. Why? you ask. Um, so it looks different to other websites... I think that's a pretty fine reason why.