/CSS/Checkbox change background color bootstrap

Checkbox change background color bootstrap

/* 
THIS ONE WORKS WITH COPY-PASTE BTW, 
YOU JUST NEED TO ADD class="custom-checkbox" 
to a div containing your checkboxes, like:
<div class="custom-checkbox">
<input type="checkbox"><label>Meh</label>
</div>
*/
	.custom-checkbox > [type="checkbox"],
    .custom-checkbox > label{
        margin-bottom:0px !important;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked),
    .custom-checkbox > [type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked) + label,
    .custom-checkbox > [type="checkbox"]:checked + label {
        position: relative;
        padding-left: 22px;
        cursor: pointer;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked) + label:before,
    .custom-checkbox > [type="checkbox"]:checked + label:before {
        content: '';
        position: absolute;
        left:0; 
        top: 50%;
        margin-top:-9px;
        width: 17px; 
        height: 17px;
        border: 1px solid #ddd;
        background: #ffffff;
        border-radius: 2px;
    }
    .custom-checkbox > [type="checkbox"]:not(:checked) + label:after,
    .custom-checkbox > [type="checkbox"]:checked + label:after {
        font: normal normal normal 12px/1 'Glyphicons Halflings';
        content: '\e013';
        position: absolute;
        top: 50%;
        margin-top:-7px;
        left: 2px;
        color: #94C947;
        xtransition: all .2s;
    }

    .custom-checkbox > [type="checkbox"]:not(:checked) + label:after {
        opacity: 0;
        transform: scale(0);
    }
    .custom-checkbox > [type="checkbox"]:checked + label:after {
        opacity: 1;
        transform: scale(1);
    }

    .custom-checkbox > [type="checkbox"][data-indeterminate] + label:after,
    .custom-checkbox > [type="checkbox"][data-indeterminate] + label:after {
        content: '\2212';
        left: 2px;
        opacity: 1;
        transform: scale(1);
    }

    .custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:before,
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:before {
        box-shadow: none;
        background-color: #eeeeee;
        border-color: #eeeeee;
        cursor: not-allowed;
        opacity: 1;
        color: #dadada;
    }
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:after {
      color: #dadada; cursor: not-allowed;
    }
    .custom-checkbox > [type="checkbox"]:disabled + label {
      color: #aaa; cursor: not-allowed;
    }
    .custom-checkbox > [type="checkbox"]:checked:focus + label:before,
    .custom-checkbox > [type="checkbox"]:not(:checked):focus + label:before {
        border: 1px solid #66afe9;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }
    .custom-checkbox > label:hover:before {
        border: 1px solid #88D2FF !important;
    }
    .custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:hover:before,
    .custom-checkbox > [type="checkbox"]:disabled:checked + label:hover:before{
        border: 1px solid #E4E4E4 !important;
    }

Source: stackoverflow.com

Similar codes

0 vote163 views1 answer
Css add shade over background image
CSS
0 vote142 views1 answer
How to make any word italic in html and css
CSS
1 vote136 views1 answer
Javafx right-align in vbox
CSS
0 vote131 views1 answer
How to add default font css
CSS
0 vote152 views1 answer
How to center an overlay button using css transform and translate
CSS
0 vote152 views2 answers
How to do addition or subtraction on CSS Variables?
CSS
14 votes102 views3 answers
What does css stand for
CSS
13 votes143 views2 answers
Button edges rounded css
CSS
22 votes141 views5 answers
Grid center css
CSS
0 vote134 views1 answer
Tsx css
CSS