Checkbox and Css style color

Question

I want to know how I can change the color of "box" in checkbox by clicking on that. I do not want to change the color of labels I just want to change the color of box by clicking of it.

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

Refer below links: http://stackoverflow.com/questions/16257629/change-color-by-checking-checkbox http://stackoverflow.com/questions/17432286/html-checkbox-change-color — bgs, Jul 20 '13 at 10:09

score 1 · Answer 1 · answered Jul 20 '13 at 10:07

1

Normally you can't do this. You need to play with css and some javascript and have to use custom checkbox.

One of the possible example is here

answered Jul 20 '13 at 10:07

Sachin

40,216
7
90
102

score 0 · Answer 2 · answered Jul 20 '13 at 10:33

this should do the trick (need bit testing and finetuning though, especially at checkbox's state) ;

// elementbyid shorthand
var $ = function(id) {
    return document.getElementById(id);
};

// this function handles background color
var markCheckbox = function(e) {
    // find id + class name
    var showId = e.target.id;
    var color = e.className
    // change color
    $(id).style.backgroundColor = color;
};

// this gets invoked when page got loaded
window.addEventistener('load', function() {
    var getElements = document.getElementsByTagName('input');
    // loop through all input elements
    for(var i = 0; i < getElements.length; i++) {
        // control if it's a checkbox + bind click event.
        if(getElements[i].type == 'checkbox') {
            (getElements[i].id).addEventListener('click', markCheckbox);
        }
    }
}

Roko C. Buljan · Answer 3 · 2013-07-20T12:39:56.630

2_¢ of mine:

http://roxon.in/scripts/checkbox_radio_custom.html

Basically with a couple of lines of JS - jQuery, you can replace the checkboxes with a<span> element. (Or with two like I did in my example link if you want to go fancy.)

$(':checkbox').each(function(){
    var $c = $(this);
    $c.hide().after('<span/>');
    $c.next('span').click(function(){
        $c[0].checked^=1;
    });
});

than all you need is to be creative using CSS and CSS3 animations.
Here's how to target your SPAN that jQuery appended after the hidden INPUT:

/* target the hidden checkbox's next SPAN element: */
input[type=checkbox] + span{

}
/* Custom checkbox HOVER: */
input[type=checkbox] + span:hover{

}
/* Custom checkbox CHECKED STATE */
input[type=checkbox]:checked + span{

}

Have fun.

Checkbox and Css style color

3 Answers3