CSS에서 선택한 라디오 버튼의 레이블 스타일을 지정하는 방법은 무엇입니까?

CSS에서 선택한 라디오 버튼의 레이블 스타일을 지정하는 방법

라디오 버튼은 웹 인터페이스에서 고유한 상호 작용 요소를 제공하여 사용자가 하나를 선택할 수 있도록 합니다. 그룹의 옵션입니다. 시각적 매력을 강화하려면 선택한 라디오 버튼과 관련된 레이블의 스타일을 지정하는 것이 바람직한 경우가 많습니다.

문제:

CSS를 사용하여 선택한 라디오 버튼의 레이블에 스타일을 적용합니다. 현재 코드 조각에는 다음이 포함되어 있습니다.

.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important;
}

문제 식별:

인접 형제 선택기 " "는 다음과만 일치하므로 이 CSS 선택기는 작동하지 않습니다. 그 뒤에 오는 요소의 첫 번째 인스턴스입니다. 그러나 HTML 코드에서는 레이블이 입력 요소 바로 옆에 있지 않습니다.

해결책:

선택한 라디오 버튼의 레이블 스타일을 지정하려면 CSS 선택기는 선택된 입력과 연관된 레이블 요소를 구체적으로 대상으로 지정해야 합니다. 이는 다음 코드에 설명된 것처럼 레이블의 'for' 속성과 각 입력 요소의 'id' 속성을 사용하여 달성할 수 있습니다.

<div class="radio-toolbar">
  <input type="radio"><pre class="brush:php;toolbar:false">.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}

CSS 선택기를 조정하면 이제 코드는 선택한 라디오 버튼의 레이블을 올바르게 대상으로 지정하고 원하는 스타일을 적용합니다.