CSS만으로 관련 체크박스 상태에 따라 라벨 스타일을 지정할 수 있나요?

JavaScript 없이 체크박스 상태에 따라 라벨 모양 수정

CSS를 활용하여 상태에 따라 라벨 모양을 제어할 수 있습니까? 또는 선택 해제됨 - 관련 항목 중 확인란을 선택하시겠습니까?

접근 방식:

JavaScript 없이 이 수정을 수행하려면 CSS의 인접 형제 결합자를 활용할 수 있습니다. 선택된 확인란 요소에 인접한 레이블 요소를 대상으로 하는 CSS 규칙을 정의하면 확인란이 선택된 상태일 때 특정 스타일 수정 사항을 적용할 수 있습니다.

코드 일러스트레이션:

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

이 코드 조각에서 CSS 규칙은 확인된 상태에서 클래스 이름이 "check-with-label"인 모든 입력 요소를 대상으로 합니다. " " 인접 형제 조합자는 체크된 체크박스 뒤에 오는 "label-for-check"라는 클래스 이름을 가진 라벨을 선택하는 데 사용됩니다.

"check-with-label" 체크박스가 체크되면, "label-for-check"에는 지정된 스타일 수정이 적용되며, 이 경우 글꼴 두께가 더 굵어집니다.

예 마크업:

<div>
  <input type="checkbox" class="check-with-label">

결론:

CSS에서 인접한 형제 조합자를 사용하면 상태에 따라 레이블의 모양을 변경하는 일관된 방법을 제공합니다. 함께 제공되는 체크박스 요소를 사용하므로 이 특정 시나리오에서는 JavaScript가 필요하지 않습니다.

위 내용은 CSS만으로 관련 체크박스 상태에 따라 라벨 스타일을 지정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!