CSS만 사용하여 체크박스 상태에 따라 라벨 스타일을 지정할 수 있나요?

JavaScript 없이 체크박스 상태를 기반으로 라벨 스타일 지정

질문:

가능합니까? 해당 확인란의 선택 상태를 기반으로 라벨의 스타일을 수정합니다. JavaScript?

답변:

예, CSS에서 인접 형제 조합자를 사용하는 것이 가능합니다.

설명:

인접한 형제 결합자( )를 활용하여 요소를 타겟팅할 수 있습니다. 지정된 요소 바로 뒤에 오는 요소입니다. 이 경우 선택된 체크박스(.check-with-label:checked)에 인접한 라벨(.label-for-check)의 스타일을 지정하는 데 사용합니다.

예:

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

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

이 예에서는 ID가 "idinput"인 확인란을 선택하면 뒤에 오는 "My Label" 라벨이 표시됩니다. 대담해질 것입니다. 이는 라벨이 다음 조건을 충족하기 때문입니다.

• 결합자로 인해 체크된 체크박스에 인접해 있습니다.
• .label-for-check 클래스 선택기와 일치합니다.

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