/CSS/Bootstrap/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 vote398 views1 answer
Bootstrap jquery popper and js cdn
Javascript Bootstrap
1 vote414 views2 answers
How to make hr class bootstrap full width
CSS Bootstrap
0 vote534 views1 answer
How to use bootstrap color variables in sass
CSS Bootstrap
0 vote429 views2 answers
Bootstrap 5 container
CSS Bootstrap
13 votes362 views3 answers
Angular.json bootstrap path
Javascript Bootstrap
0 vote384 views1 answer
Datatable bootstrap cllick on specific button
Javascript Bootstrap
33 votes403 views6 answers
Angular add bootstrap
Javascript Bootstrap
5 votes388 views2 answers
Close bootstrap modal with javascript
Javascript Bootstrap
120 votes491 views3 answers
React import bootstrap css file
CSS Bootstrap
118 votes553 views6 answers
Instalar bootstrap en react
Javascript Bootstrap