CODEWITHSUNDEEP
csscheckbox
David Savage
David Savage

Reputation:

CSS Styling Checkboxes

Okay, so I've seen lots of solutions for styling checkboxes via CSS on the web. However, I'm looking for something slightly more robust, and I'm wondering if someone can help. Basically, I want to have this solution, but with the ability to have a CSS-specified color overlaying a gray checkbox. I need this because I will have unpredictable numbers of different checkboxes, each needing a different color, and I don't want to create vast amounts of different images to handle this. Anyone have any ideas on how to achieve this?

Upvotes: 20

Views: 86533

Answers (4)

Sebastian Vox
Sebastian Vox

Reputation: 29

I've found http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ a javascript + css solution thats works on win ie, win and mac: chrome, safari, firefox, opera. iOS Safari and chrome.

Upvotes: 2

Jeff B
Jeff B

Reputation: 30099

I created a transparent png, where the outside is white, and the checkbox is partially transparent. I modified the code to put a backgroundColor on the element, and voila!, a colorized checkbox.

http://i48.tinypic.com/raz13m.jpg (It says jpg, but it's a png).

I would post the example, but I don't know of a good way to show it. Any good sandbox sites out there?

This, of course, depends on png support. You could poorly do this with gif, or put a semi-transparent css layer over the image, like you suggested, and then use a gif mask to mask out the bleed of the colored box. This method assumes transparency support.

My png method uses the css, js from the page you linked to, with these changes:

JS:

    // Changed all instances of '== "styled"' to '.search(...)' 
    // to handle the additional classes needed for the colors (see CSS/HTML below)
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {

    span[a] = document.createElement("span");

            // Added '+ ...' to this line to handle additional classes on the checkbox
    span[a].className = inputs[a].type + inputs[a].className.replace(/^styled/, "");

CSS:

 .checkbox, .radio {
    width: 19px;
    height: 25px;
    padding: 0px; /* Removed padding to eliminate color bleeding around image
       you could make the image wider on the right to get the padding back */
    background: url(checkbox2.png) no-repeat;
    display: block;
    clear: left;
    float: left;
 }

 .green {
    background-color: green;
 }

 .red {
    background-color: red;
 }

 etc...

HTML:

<p><input type="checkbox" name="1" class="styled green"/> (green)</p>
<p><input type="checkbox" name="2" class="styled red" /> (red)</p>
<p><input type="checkbox" name="3" class="styled purple" /> (purple)</p>

Hope that makes sense.

Edit:

Here is a jQuery example that illustrates the principle with checkboxes:

http://jsfiddle.net/jtbowden/xP2Ns/

Upvotes: 31

Johnny4000
Johnny4000

Reputation: 187

Jeff B's answer on how to edit the said solution is correct. Here is the implementation of his edit to the solution if someone needs to copy and paste.

JavaScript http://pastebin.com/WFdKwdCt

CSS http://pastebin.com/TM1WwSQW

Upvotes: 3

Banjer
Banjer

Reputation: 8300

It sounds like you already know this, but the solution you linked to above actually replaces the checkbox with a span tag with an image to give the effect of a "styled" checkbox.

For most browsers like IE and Firefox, there are few (if any) options and very little support for styling checkboxes with CSS alone.

Upvotes: 6

Related Questions