選択したラジオ ボタンのラベルを CSS でスタイルするにはどうすればよいですか?

CSS で選択したラジオ ボタンのラベルをスタイル設定する

選択したラジオ ボタンのラベルをスタイルするには、ラベル要素をスタイルし、セレクターを使用して隣接する入力をターゲットにします[type ="ラジオ"] チェックすると。

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 中国語 Web サイトの他の関連記事を参照してください。