CSS :checked 선택자 완벽 정리 – 체크된 input 요소 스타일링하기

CSS의 :checked 선택자는 체크박스나 라디오 버튼처럼 현재 선택(체크)된 상태에 있는 모든 <input> 요소에 스타일을 적용할 수 있는 의사 클래스(pseudo-class)입니다. 이 선택자를 활용하면 사용자가 항목을 체크하는 순간 크기나 색상 등을 바꿔 시각적인 피드백을 제공할 수 있어, 폼(form) UI를 더욱 직관적으로 만들 수 있습니다.

아래 코드를 직접 실행하면 :checked 선택자가 어떻게 동작하는지 확인할 수 있습니다.

예제

<!DOCTYPE html>
<html>
  <head>
    <style>
      input:checked {
        height: 20px;
        width: 20px;
      }
   </style>
 </head>
 <body>
   <p>좋아하는 스포츠:</p>
   <form action="">
     <input type="checkbox" value="Football">축구<br>
     <input type="checkbox" value="Cricket">크리켓<br>
     <input type="checkbox" checked="checked" value="Tennis">테니스<br>
     <input type="checkbox" value="Badminton">배드민턴
  </form>
</body>
</html>

실행 결과

CSS :checked 선택자 완벽 정리 – 체크된 input 요소 스타일링하기

위 예제에서는 input:checked 규칙을 통해 체크된 입력 요소의 크기를 가로·세로 20px로 지정했습니다. 페이지가 로드되면 '테니스' 항목은 checked 속성 덕분에 기본적으로 선택된 상태로 표시되며, 이 항목의 체크박스만 다른 항목보다 크게 나타나는 것을 확인할 수 있습니다.

알아두면 좋은 점

:checked 선택자는 체크박스(<input type="checkbox">), 라디오 버튼(<input type="radio">), 그리고 <option> 요소에 적용할 수 있습니다.
모든 최신 브라우저에서 지원되므로 별도의 호환성 처리 없이 바로 사용할 수 있습니다.
::before, ::after 같은 가상 요소와 조합하면 기본 체크박스와 라디오 버튼을 자유롭게 커스터마이징할 수 있습니다.