활성화되었을 때 확인란의 배경색을 변경하십시오.

Question

사용자 정의 스타일 체크 상자가 활성화 (선택)되어 있으면 배경색을 녹색으로 변경하고 싶습니다. 나는 배경을 변경 나던,

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 : http://codepen.io/anon/pen/WGvPpk

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>

을