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

CSS에서 선택한 라디오 버튼 라벨 스타일 지정

이 예에서는 선택한 라디오 버튼의 라벨 스타일을 지정하는 것이 목표입니다. 그러나 제공된 CSS가 의도한 대로 작동하지 않는 것 같습니다. 문제를 식별하기 위해 HTML 및 CSS 코드를 분석해 보겠습니다.

HTML 코드에는 라디오 버튼과 해당 레이블이 포함된 "radio-toolbar" 클래스가 있는 div가 포함되어 있습니다. 각 라디오 버튼은 display: none;을 사용하여 숨겨집니다. 레이블에는 배경색, 테두리, 패딩 등의 스타일이 적용되어 있습니다.

CSS로 이동하면 첫 번째 규칙이 라디오 버튼 입력을 숨깁니다. 이는 올바른 것입니다. 두 번째 규칙은 레이블 자체의 스타일을 지정합니다. 문제는 선택한 라디오 버튼의 레이블 스타일을 지정하기 위한 세 번째 규칙에 있습니다.

세 번째 규칙에서는 다음을 사용하여 선택된 라디오 버튼 바로 옆에 있는 레이블 요소를 선택하려고 합니다. 선택기: .radio-toolbar 라벨 입력[type="radio"]:checked. 그러나 선택기는 바로 앞의 요소와만 일치합니다. 이 경우 라디오 버튼 입력이 라벨 앞에 올 것으로 예상하지만 HTML 코드에서는 라벨이 입력 앞에 옵니다.

수정된 CSS

문제를 해결하려면 다음을 수행하세요. 대신 다음 CSS를 사용하세요.

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

선택기를 .radio-toolbar input[type="radio"]:checked 라벨로 변경하면, 선택된 라디오 버튼 입력을 따르는 레이블에 배경색이 적용되는지 확인합니다.

기능에 대한 추가 변경 사항

선택기 문제 외에도 우리가 수행할 수 있는 몇 가지 다른 변경 사항이 있습니다. 더 나은 기능을 위해:

1. 라벨 정렬을 위해 인라인 블록을 사용하는 것이 좋습니다.
2. 라벨에 for 속성을 설정하고 라디오 버튼에 해당 id 속성을 설정하면 올바르게 연결됩니다.

다음은 업데이트된 HTML 및 CSS:

HTML:

<div class="radio-toolbar">
  <input type="radio">

CSS:

.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에서 선택한 라디오 버튼 레이블의 스타일을 올바르게 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!