체크(선택)된 모든 <input> 요소에 스타일을 적용하려면 CSS의 :checked 선택자를 사용하면 됩니다. :checked는 체크박스나 라디오 버튼이 선택된 상태일 때 해당 요소를 대상으로 하는 의사 클래스(pseudo-class)로, 선택 여부에 따라 크기, 색상 등 다양한 스타일을 동적으로 변경할 수 있습니다.
아래 예제 코드를 직접 실행하여 :checked 선택자가 어떻게 작동하는지 확인해 보세요.
예제
<!DOCTYPE html>
<html>
<head>
<style>
input:checked {
height: 20px;
width: 20px;
}
</style>
</head>
<body>
<p>좋아하는 스포츠:</p>
<form action="">
<input type="checkbox" value="Football"> 축구(Football)<br>
<input type="checkbox" value="Cricket"> 크리켓(Cricket)<br>
<input type="checkbox" checked="checked" value="Tennis"> 테니스(Tennis)<br>
<input type="checkbox" value="Badminton"> 배드민턴(Badminton)
</form>
</body>
</html>코드 설명
위 코드에서 input:checked { height: 20px; width: 20px; } 규칙은 현재 체크된 상태의 input 요소에만 적용됩니다. 예제에서는 테니스(Tennis) 항목에 checked 속성이 미리 설정되어 있으므로, 페이지가 로드되는 순간 테니스 체크박스만 20×20px 크기로 표시되고 나머지 체크박스는 기본 크기를 유지합니다.
또한 이 스타일은 정적인 것이 아니라 실시간으로 반영됩니다. 사용자가 다른 체크박스를 클릭하여 선택하는 즉시 해당 요소에도 동일한 크기의 스타일이 적용되고, 선택을 해제하면 원래대로 돌아갑니다. 이처럼 :checked 선택자를 활용하면 JavaScript 없이도 순수 CSS만으로 사용자의 선택 상태에 반응하는 인터랙티브한 UI를 만들 수 있습니다.
실행 결과
