Ändern Sie die Hintergrundfarbe eines Kontrollkästchens, wenn es aktiv ist

Question

Ich möchte die Hintergrundfarbe auf grün ändern, wenn das Kontrollkästchen für das benutzerdefinierte Format aktiviert ist (aktiviert). Ich habe diese

Html versucht

<div class="checkboxOne"> 
     <input type="checkbox" value="1" id="checkboxOneInput" name="" /> 
     <label for="checkboxOneInput"></label> 
    </div> 

Css

input[type=checkbox] { 
    visibility: hidden; 
} 

.checkboxOne { 
    width: 40px; 
    height: 10px; 
    background: #9c9d9d; 
    margin: 20px 80px; 
    position: relative; 
    border-radius: 3px; 
box-shadow: inset 0px 0px 2px #565656; 
} 

.checkboxOne label { 
    display: block; 
    width: 16px; 
    height: 16px; 
    border-radius: 50%; 
    -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    transition: all .5s ease; 
    cursor: pointer; 
    position: absolute; 
    top: -4px; 
    left: -3px; 
border:1px solid #9b9b9b; 
    background: #fff; 
} 

.checkboxOne input[type=checkbox]:checked + input { 
    background: #21ae56; 
} 

.checkboxOne input[type=checkbox]:checked ~ div { 
    background: #21ae56; 
} 

.checkboxOne input[type=checkbox]:checked + label { 
    left: 27px; 
} 

aber es tut den Hintergrund zu ändern. Was ist der richtige Weg?

Codepen: http://codepen.io/anon/pen/WGvPpk

Answer 1

Checkbox keinen Hintergrund-Farbattribut

Sie gefälschte Elemente verwenden können Sie das Kontrollkästchen wickeln und die Farben derjenigen ändern:

input[type=checkbox] { 
 
    width: 30px; 
 
    height: 30px; 
 
    font-size: 27px; 
 
} 
 
input[type=checkbox]:after { 
 
    content: " "; 
 
    background-color: purple; 
 
    display: inline-block; 
 
    visibility: visible; 
 
} 
 
input[type=checkbox]:checked:after { 
 
    content: "\2714"; 
 
    /* this is a checkmark symbol */ 
 
}

<label>Checkbox label 
 
    <input type="checkbox"> 
 
</label>