라벨이없는 순수한 CSS 체크 박스

Question

나는 라벨이없는 경우에도 체크 박스를 쉽게 스타일링 할 수있는 방법을 찾고 있었지만 완전히 만족하는 답을 찾지 못했지만 다른 모든 사람들이 유용하다고 생각할 수있는 나 자신의 길.

Answer 1

이것은 내가 결국 해결 한 것입니다.

CSS Checkbox without label

나는 기본적 요소 후 스타일을하고 요소 뒤에 진정한 클릭 할 수 있습니다 있도록 없음으로 포인터 이벤트를 설정하는 일.

이렇게하면 체크 상자가 클릭을 처리하고 상태를 선택에서 선택 취소로 변경할 수 있으며 확인란 상태에 따라 after 요소의 스타일을 지정합니다.

.check:checked:after{ 
    background: green; /* Change background and maybe image */ 
    .... 
} 

원래 확인란 요소 후에서 여전히 볼 수 있음을주의하시기 바랍니다 우리의 선택 스타일이

.check:after{ 
    pointer-events: none; 
    background: white; 
    content: ... 
    .... 
} 

확인되지 않은 스타일이 될 것입니다 그리고 우리가해야 우리가 할 수 있기 때문에 그것을 숨기면 (숨기기가 요소 앞뒤에 숨어 버릴 것입니다.) 따라서 after 요소에서 투명도로 재생할 수 없지만 예제에서와 같이 배경 이미지 위치와 배경색으로 재생할 수 있습니다.

여러분의 스타일에 도움이되기를 바랍니다. :)