how to change the background color of checkbox?

Question

CSS:

#partoption2 {
    background: none repeat scroll 0 0 #FF0000;
    height: 16px;
    position: relative;
    top: 3px;
    width: 16px;
}

HTML:

<input type="checkbox" name="parttwo" id="partoption2" value="206365-KT:" >manoji

Hi Friends here I need background color of the checkbox to be green and while I check it should go red when I uncheck. Can anyone give me a solution?

http://jsfiddle.net/5txp5g5u/1/

If your are using CSS3 use the selector ':checked' like this #partoption2:checked — frankfg, Sep 10 '14 at 06:12
I suggest hide this checkbox and use sprite map instead, you will have same looking checkbox across all browsers and OS'es. It's bad idea to style form elements, because you will face lots of problems (mac and windows, FF, Chrome, Safari, IE and other browsers). — Justinas, Sep 10 '14 at 06:12
Are you looking for [this](http://jsfiddle.net/kawadkarbk31/5txp5g5u/12/) — Bhushan Kawadkar, Sep 10 '14 at 06:15
possible duplicate of [How to style checkbox using CSS?](http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css) — davidcondrey, Sep 10 '14 at 06:15
You cannot alter the look & feel of check box & radio button, but you can do some thing like this :http://www.inserthtml.com/2013/09/custom-checkbox-set/, http://codepen.io/CreativeJuiz/pen/BiHzp — Sark, Sep 10 '14 at 06:16
@Bhushan Kawadkar not this i need the "checkbox" to change the color. — manoji stack, Sep 10 '14 at 06:17
@mycholan [of course you can](http://www.css3.com/implementing-custom-checkboxes-and-radio-buttons-with-css3/) — yuvi, Sep 10 '14 at 06:17
@yuvi you can with custom plugin ( which will hide the default checkbox and display image based one ) ( we cannot style default checkbox ). — Sark, Sep 10 '14 at 06:20

davidcondrey · Accepted Answer · 2014-09-10T06:47:01.310

http://codepen.io/dcdev/full/toBzb/

Green when unchecked, red when checked.. This works by actually hiding the default checkbox and styling the label over to of the hidden checkbox to look like a checkbox.

label {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: green;
    -webkit-transition: background-color 1s ease-out 1s;
    -moz-transition: background-color 1s ease-out 1s;
    -o-transition: background-color 1s ease-out 1s;
    transition: background-color 1s ease-out 1s;
}

.checkbox_red input[type=checkbox]:checked + label {
    background-color:red;
    -webkit-transition: background-color 1s ease-out 1s;
    -moz-transition: background-color 1s ease-out 1s;
    -o-transition: background-color 1s ease-out 1s;
    transition: background-color 1s ease-out 1s;
}

.checkbox_red label:after {
    position: absolute;
    bottom: 8px;
    width: 18px;
    height: 10px;
    opacity: 0;
    content: '';
    background: transparent;
    border: 3px solid #000;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -o-transform: rotate(-50deg);
    transform: rotate(-50deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}
.checkbox_red input[type=checkbox] {
    visibility: hidden;
}
.checkbox_red input[type=checkbox]:checked + label:after {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);    
}

and the html

<div class="checkbox_red">
  <input type="checkbox" value="none" id="checkbox_red1" name="check">
  <label for="checkbox_red1"></label>
</div>

score 0 · Answer 2 · answered Sep 10 '14 at 06:33

Try this .. i hope you will get a solution for your problem.

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

********javascript

$(function() {

    $('input[type=checkbox]').each(function() {
        var span = $('<span class="' + $(this).attr('type') + ' ' + $(this).attr('class') + '"></span>').click(doCheck).mousedown(doDown).mouseup(doUp);
        if ($(this).is(':checked')) {
            span.addClass('checked');
        }
        $(this).wrap(span).hide();
    });

    function doCheck() {
        if ($(this).hasClass('checked')) {
            $(this).removeClass('checked');
            $(this).children().prop("checked", false);
        } else {
            $(this).addClass('checked');
            $(this).children().prop("checked", true);
        }
    }

    function doDown() {
        $(this).addClass('clicked');
    }

    function doUp() {
        $(this).removeClass('clicked');
    }
});


****css

.checkbox, .radio {
    width: 19px;
    height: 20px;
    padding: 0px;
    background: url("http://i48.tinypic.com/raz13m.jpg");
    display: block;
    clear: left;
    float: left;
 }

.checked {
     background-position: 0px -50px;   
}

.clicked {
     background-position: 0px -25px;
}

.clicked.checked {
     background-position: 0px -75px;
}


.green {
    background-color: green;
 }

 .red {
    background-color: red;
 }

.purple {
    background-color: purple;
 }

how to change the background color of checkbox?

2 Answers2

Linked