/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

2 votes248 views1 answer
Bootstrap class="mb-3"
CSS Bootstrap
-2 votes219 views2 answers
How will it look when there is a container inside a a row bootstrap
Javascript Bootstrap
0 vote242 views1 answer
Sticky footer not working bootstrap
CSS Bootstrap
125 votes364 views6 answers
Install React Bootstrap
Javascript Bootstrap
0 vote273 views1 answer
Bootstrap 3 dropdown don't close on click
Javascript Bootstrap
42 votes310 views5 answers
Npm bootstrap
CSS Bootstrap
19 votes168 views3 answers
Bootstrap media queries
CSS Bootstrap
0 vote277 views1 answer
Bootstrap modal disable close on click outside react bootstrap
Javascript Bootstrap
1 vote313 views1 answer
React-bootstrap navbar nav link refreshes page
Javascript Bootstrap
14 votes268 views4 answers
Text align left bootstrap
CSS Bootstrap