アクティブなときにチェックボックスの背景色を変更します。

Question

カスタムスタイルチェックボックスがアクティブ（チェック）の場合、背景色を緑に変更します。私はそれが背景を変更doesntの、

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; 
} 

しかし、この

HTML形式に

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

のCss

を試してみました。それを行う正しい方法は何ですか？

Codepen：​​

Answer 1

チェックボックスを使って、チェックボックスをラップし、それらの色を変更するために偽の要素を使用することができ、背景色の属性に

を持っていません。

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>