체크 박스가 체크되지 않았을 때 체크 박스가 작동하지 않음

Question

사용자가 체크 박스를 체크하고 체크하지 않도록 체크 박스를 HTML 페이지에 포함 시켰습니다. 체크 박스 테두리와 라벨을 강조하기 위해 스타일을 썼습니다.

은 약간의 도움이 될 수 있습니다.

<input type="checkbox" name="createartwork" id="createartwork"> 
<label class="label-for-check" for="createartwork">I want your Designer to create my artwork</label> 


input[type=checkbox]:checked + label::after{ 
    background-color: #FD6418; 
} 


input:checked { 
    height: 50px; 
    width: 50px; 
} 

Answer 1

<input type="checkbox" name="createartwork" id="createartwork"> 
<label class="label-for-check" for="createartwork">I want you to create my artwork</label> 

:checked + label { 
    background-color: #FD6418; 
    font-weight: bold; 
} 

보십시오.

Answer 2

당신은 조금 떨어져 트랙, 원래 <input> 태그의 스타일을 할 수있어, 당신 수 가짜 그래서 당신이 제공 한 코드를 사용하여 레이블이있는 새로운 체크 박스 :

HTML :

를

input[type=checkbox] 
+ label::before { 
    content: ''; 
    width: 5px; 
    height: 5px; 
    background-color: #FF0; 
    margin-right: 5px; 
    padding: 0px 5px; 
} 
input[type=checkbox]:checked + label::before{ 
    content: 'x'; 
    background-color: #FF0; 
    margin-right: 5px; 
    padding: 0px 5px; 
} 

input[type=checkbox] { 
    display: none; 
} 

와 C의 : CSS

<input type="checkbox" name="createartwork" id="createartwork"> 
<label class="label-for-check" for="createartwork"> 
I want you to create my artwork</label> 

ourse, a working example