Kontrollkästchen backgroung Änderung auf überprüft

Question

<span class="heading-filter"> 
    Cashback 
    <input class="cashback_check" value="1" type="checkbox"> 
    <label class="label-text"></label> 
</span> 

Ich brauche Farbwechsel von Kontrollkästchen und span auch.

Answer 1

span.heading-filter{position:relative;} 
input[type="checkbox"].cashback_check:checked + .label_txt::after { 
content: ""; 
font-family: "FontAwesome"; 
left: 99px; 
position: absolute; 
top: 5px; 
} 
.heading-filter::after { 
border: 1px solid; 
content: ""; 
display: inline-block; 
height: 18px; 
width: 18px; 
} 
input.cashback_check{opacity:0;z-index:3;position:absolute;top:6px;left: 10px;height:30px; width:90%;} 

span.heading-filter{position:relative;} 
 
\t input[type="checkbox"].cashback_check:checked + .label-text::after { 
 
\t content: "ok"; 
 
\t font-family: "FontAwesome"; 
 
\t left:72px; 
 
\t position: absolute; 
 
    color:red; 
 
    top: 0px; 
 
\t } 
 
\t .heading-filter::after { 
 
\t border: 1px solid #000; 
 
\t content: ""; 
 
\t display: inline-block; 
 
\t height: 18px; 
 
\t width: 18px; 
 
\t } 
 
\t input.cashback_check{opacity:0;z-index:3;position:absolute;top:0px;left: 10px;height:30px; width:90%;} 
 
    input[type="checkbox"].cashback_check:checked span{background:#ccc;display:block}

<span class="heading-filter">Cashback <input class="cashback_check" value="1" type="checkbox"><label class="label-text"></label></span>

Answer 2

Ich mache mit CSS individuelle Checkbox nur bitte überprüfen. wenn deaktivieren Sie Ihre Checkbox

input[type="checkbox"] + label::before { 
 
    background: #fff; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    bottom: 0; 
 
    content: ""; 
 
    height: 15px; 
 
    left: auto; 
 
    margin: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 15px; 
 
    right:0; 
 
} 
 
input[type="checkbox"]:checked + label::before { 
 
    background: #ccc; 
 
} 
 
input[type="checkbox"]:checked + label{ 
 
    color:orange; 
 
} 
 
input[type="checkbox"] + label { 
 
    padding-right: 20px; 
 
    position: relative; 
 
} 
 
input[type="checkbox"] { 
 
    opacity: 0; 
 
    position: absolute; 
 
    right:0; 
 
} 
 
span.heading-filter { 
 
    position: relative; 
 
}

<span class="heading-filter"> <input id="check" class="cashback_check" 
 
value="1" type="checkbox"><label for="check" class="label-text">Cashback</label></span>

Answer 3

Diese Lösung wird einen Hintergrund hinzufügen, wenn geprüft, und es entfernen. Versuch es!

jQuery(document).on('click', '.cashback_check', function() { 
 
    if (this.checked) { 
 
     $(this).closest('span').addClass('checked'); 
 
     $(this).addClass('checked'); 
 
    } 
 
    else { 
 
\t \t $(this).closest('span').removeClass('checked'); 
 
     $(this).removeClass('checked'); 
 
    } 
 
});

.checked { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="heading-filter"> 
 
    Cashback 
 
    <input class="cashback_check" value="1" type="checkbox"> 
 
    <label class="label-text"></label> 
 
</span>

Meine Geige hier: nur https://jsfiddle.net/eqomzkg5/

Answer 4

.heading-filter .label-text::before { 
 
    background:#16a085; 
 
    content: ""; 
 
    display: inline-block; 
 
    height: 20px; 
 
    left: 134px; 
 
    position: absolute; 
 
    top:3px; 
 
    width: 20px; 
 
} 
 
.heading-filter .label-text{display:block;padding:4px;font-weight:normal;} 
 
input[type="checkbox"].cashback_check:checked + .label-text{background: #428bca none repeat scroll 0 0; 
 
    color: #fff;width:100%;} 
 
span.heading-filter{position:relative;} 
 
input[type="checkbox"].cashback_check:checked + .label-text::after { 
 
    content: ""; 
 
    font-family: "FontAwesome"; 
 
    left: 136px; 
 
    position: absolute;top:3px;font-size:16px; 
 
    
 
} 
 
input[type="checkbox"].cashback_check:checked .heading-filter .label-text::before{background:#16a085} 
 
.cashback_check { 
 
    height: 30px; 
 
    left: 124px; 
 
    position:absolute; 
 
    
 
    z-index: 2;display:block;width:30px;opacity:0; 
 
    }

<span class="heading-filter"><input class="cashback_check" value="1" type="checkbox"><label class="label-text">Cashback </label></span>