CODEWITHSUNDEEP
htmlcsscheckbox
Webdrips
Webdrips

Reputation: 265

How to apply background color to checkbox using CSS3?

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.

Upvotes: 0

Views: 8790

Answers (2)

James Coyle
James Coyle

Reputation: 10398

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).

Upvotes: 1

spy-killer
spy-killer

Reputation: 405

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

Upvotes: 2

Related Questions