Take the 2-minute tour ×

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?

share|improve this question
I wanted this was as easy in all browsers and not only in MobileSafari :'( –  user142019 Dec 31 '09 at 18:54
add comment

5 Answers

up vote 29 down vote accepted

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:


    // 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/, "");


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



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


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


share|improve this answer
Awesome! This looks like what I'm looking for. I'll try it out and get back with you! –  David Savage Dec 31 '09 at 20:47
add comment

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.

share|improve this answer
That has been my experience as well. –  Robert Harvey Dec 31 '09 at 18:57
Yeah, I'm aware that's what they're doing. I'm just hoping I can replace the checkbox with an image, like in the example, but then overlay a color on the image to tint it a specific color so that I don't have to create a bunch of different colored images, if that makes sense. –  David Savage Dec 31 '09 at 19:13
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
Hi Sebastian, welcome to Stackoverflow! Thanks for adding this answer: it looks useful. It would be great, however, if your answers could be a little more than just the link. A brief description of how the solution works/is used would add a lot to your answer. –  lonesomeday Oct 24 '12 at 6:28
add comment

I tried this using div tag not using input tag. Here is the link check box with background color red

    border: 1px solid black

<div style="width:10px;height:10px;" class="unchkd"></div>Checkbox

    if ($(this).hasClass('unchkd')){
    else {

If you need to set id or any other attributes use

share|improve this answer
add comment

Your Answer

