unclickable 체크 박스 - CSS 전용

Question

나는 체크 박스를 사용자 정의하려고 노력하고있다. 반올림하기 위해 수정 한 이후로 체크 박스를 언 클릭 할 수 없습니다.
다음 코드는 무엇이 잘못 되었나요? HTML에서

, CSS에서

<div class="checkbox-circle"> 
    <input id="checkbox-1" type="checkbox" checked /> 
    <label for="checkbox-1">Checkbox 1</label> 
</div>  

,

.checkbox-circle input[type="checkbox"] { 
    display: none; 
} 
.checkbox-circle label { 
    display: inline-block; 
    cursor: pointer; 
    position: relative; 
    padding-left: 25px; 
    margin-right: 12px; 
} 
.checkbox-circle label:before { 
    content: ''; 
    display: inline-block; 
    width: 15px; 
    height: 15px; 
    position: absolute; 
    left: 0; 
    border: 1px solid #cccccc; 
    border-radius: 3px; 
} 
.checkbox-circle input[type="checkbox"]:checked + label:before { 
    font-size: 13px; 
    color: #5bc0de; 
    text-align: center; 
    line-height: 11px; 
    font-family: 'Glyphicons Halflings'; 
    content: "\e013"; 

}

그것은 내가 원하지만 클릭 할 수있는 모든 것과 보여주는 것. 미리 감사드립니다.

Answer 1

이 문제는 display:none을 사용하여 확인란을 숨기고 모든 환경에서 작동하지 않는다는 사실 때문에 발생합니다.

난 당신이 코드를 안전한 구현을 제안한다

.checkbox-circle input[type="checkbox"] { 
    opacity: 0; // instead of display:none 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 20px; 
    width: 20px; 
    z-index: 2; // or above 
} 

개념이 진짜 -invisible- 체크 박스를 클릭 사용자를 가진 당신이 그랬던 것처럼 :checked 선택기를 사용하여 스타일을 전파한다.

Answer 2

확인란을 수정하지 않았습니다. 당신은 체크 박스를 숨기고 자신의 체크 박스와 같은 요소를 추가했습니다. 확인란이 숨겨져 있기 때문에 클릭 할 수 없으므로 상태가 변경되지 않습니다.

이렇게하려면 숨겨진 체크 박스의 상태를 사용자 정의 체크 박스 요소에 연결하고 요소를 클릭 할 때 상태를 변경하려면 자바 스크립트를 추가해야합니다.

편집 : 사실 내가 틀렸어. 라벨을 클릭하면 체크 상자의 상태를 전환 할 수 있다는 것을 잊어 버렸습니다. 그것은 여전히 ​​확인란을 숨기기 위해 자바 스크립트를 사용하는 것이 더 쉬울 수도 있습니다.