CSS에서 체크 된 상태의 체크 박스 또는 라디오 버튼을 체크하지 않고 체크하지 않는 방법은 무엇입니까?

Question

표시되는 레이블이있는 보이지 않는 라디오 버튼과 체크 박스를 사용하여 모드 UI (언제든지 단일 모드 활성화)와 토글 버튼을 만듭니다. 이상적으로 나는 다음과 같은 템플릿을 사용하고

검사

프레스

1. 체크되지 않는 다음과 같은 상태의 각각 다른 이미지를 갖고 싶어. : checked 및 : not (: checked) 선택기가 작동합니다. 버튼 요소의 경우 : active는 마우스 아래/눌린 상태에서 작동하는 것 같습니다. 체크 박스와 라디오 버튼의 경우 작동하지 않는 것 같습니다. 마우스를 아래로 눌렀을 때의 스타일은 어떻게합니까?

   input#toggle_button:not(:checked) ~label{ 
        content: url(../assets/button_toggle_normal.png); 
       } 
   
       input#toggle_button:checked ~label{ 
        content: url(../assets/button_toggle_selected.png); 
       } 
   
       input#toggle_button:active ~label{ 
        content: url(../assets/button_toggle_pressed.png); 
       } 
   

Answer 1

:

$("input#toggle_button ~label").on("mousedown", function(){ 
    $(this).addClass("pressed"); 
}).on("mouseup", function(){ 
    $(this).removeClass("pressed"); 
}); 

확인이 Codepen : http://codepen.io/kaoz70/pen/JKWXvx

Answer 2

체크 박스 및 라디오 버튼과 함께 :active을 사용할 수 없습니다.

the W3 standard 당, :active는 버튼 입력에서 작동 : 요소가 그 type 속성 제출 버튼, 이미지 버튼에, 버튼, 또는 버튼 상태

재설정 input 요소가

경우

다음과 같은 임시 해결 방법을 제시해야합니다.

$('[type="checkbox"]').bind('mousedown', function() { 
    $(this).addClass('active'); 
}).bind('mouseup mouseout change', function() { 
    $(this).removeClass('active'); 
}); 

참고 : 활성 상태는 스페이스 바 키 다운 이벤트 및 터치 이벤트를 고려해야합니다.

내가, 내가 가서 이것에 대한 자바 스크립트/jQuery를 사용하는 것이 이것 순수 CSS의 솔루션이 될 것 같아요