CSS를 사용하여 선택한 라디오 버튼 레이블의 스타일을 어떻게 지정할 수 있습니까?

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

선택한 라디오 버튼의 라벨 스타일을 지정하려면 라벨 요소의 스타일을 지정하고 선택기를 사용하여 인접 입력을 대상으로 합니다. ="radio"] 선택 시.

HTML 마크업

<div class="radio-toolbar">
  <label><input type="radio" value="all" checked>All</label>
  <label><input type="radio" value="false">Open</label>
  <label><input type="radio" value="true">Archived</label>
</div>

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!