How to apply background color to checkbox using CSS3?

Question

I've been searching for a solution to this problem for a few hours now without any luck. Seems like everyone uses a background image to solve their problem, and I only want to use a color so the solution scales better without extra CSS needed for mobile devices.

I almost have a working solution, but 1) the "checkbox" is not clickable like the rest of the label; 2) I just can't seem to find any way to add space between the label and the "checkbox" without altering the HTML (something that I prefer not to do, but will try if there's no workable CSS-only or JQuery solution).

Here's the HTML:

<div id="edit-field-school-education-und" class="form-checkboxes">
    <div class="form-item form-type-checkbox form-item-field-school-education-und-28">
        <input type="checkbox" id="edit-field-school-education-und-28" name="field_school_education[und][28]" value="28" checked="checked" class="form-checkbox">  
        <label class="option" for="edit-field-school-education-und-28">Evening Classes &amp; Distance Learning </label>
    </div>
     ......  Repeated for several checkboxes   .......
</div>

Here's my CSS so far:

.form-checkbox {display:none}
.form-checkbox + label:before {content: "\00a0\00a0\00a0\00a0"; height: 19px; width: 19px; border: 1px  solid black; cursor:pointer; }
input[type="checkbox"]:checked + label:before {background-color: #34c1ce;}

I prefer a CSS3 solution, but would be okay with a generic HTML or JS solution. I can't have a solution based on IDs etc. since the checkbox list may grow at any time. However, I could probably figure out a way to output a div with the same label text.

The checkbox element, as well as many other input types, are controlled by the browser's own stylesheet. They are set with the !important declaration and cannot be changed by any other CSS. w3.org/TR/CSS21/cascade.html#cascade You will probably have to use JS. @spy-killer's link looks cool too. — smulholland2
– smulholland2, Commented Jan 31, 2013 at 2:09

spy-killer · Accepted Answer · 2013-01-31 01:49:15Z

2

You cant set a background color to a checkbox it is rendered depending on the browser not the css, But you could set a background image here is a handy tutorial

http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

answered Jan 31, 2013 at 1:49

spy-killer

4054 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Webdrips Over a year ago

This solution uses images, which I said I'm not looking to use.

James Coyle · Accepted Answer · 2013-01-31 01:53:11Z

1

Best option is to create your own checkboxes with buttons and JavaScript or use a JavaScript UI. This however means that it doesn't work if JavaScript isn't enabled so you may wish to create a fallback (have a checkbox shown by default and use JS to switch it out with the custom one).

answered Jan 31, 2013 at 1:53

James Coyle

10.5k2 gold badges42 silver badges49 bronze badges

5 Comments

Webdrips Over a year ago

That sounds interesting...do you have an example you can link to?

James Coyle Over a year ago

This jqueryui.com is an easy way to implement stylable checkboxes but requires JS to be enabled. I don't currently have an example of custom UI though.

Webdrips Over a year ago

Okay thanks...I'll research this some more. I assume the JS will need to also check the checkbox when the button is clicked.

James Coyle Over a year ago

Yes. Just put a checkbox in the button element then set visibility:hidden so it isn't shown. You can then use JavaScript to check and uncheck the input behind the scenes while changing the class/styles of the button element. The checkbox should correctly pass the data when the form is submitted. You should also consider alternate styles to allow the checkbox to be shown if JS is disabled.

Webdrips Over a year ago

Thanks I will check this out as a possibility.

Collectives™ on Stack Overflow

How to apply background color to checkbox using CSS3?

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related