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

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

ラジオ ボタンは、Web インターフェイスに独自のインタラクション要素を提供し、ユーザーがラジオ ボタンを選択できるようにします。グループからのオプション。視覚的な魅力を高めるために、選択したラジオ ボタンに関連付けられたラベルのスタイルを設定することが望ましいことがよくあります。

問題:

しようとしているときに課題が発生しました。 CSS を使用して、選択したラジオ ボタンのラベルにスタイルを適用します。現在のコード スニペットには次のものが含まれています:

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

問題の特定:

隣接する兄弟セレクター " " のみが一致するため、この CSS セレクターは機能しません。それに続く要素の最初のインスタンス。ただし、HTML コードでは、ラベルが入力要素のすぐ隣にありません。

解決策:

選択したラジオ ボタンのラベルのスタイルを設定するには、 CSS セレクターは、チェックされた入力に関連付けられたラベル要素を明確にターゲットにする必要があります。これは、次のコードに示すように、ラベルの 'for' 属性とそれぞれの入力要素の 'id' 属性を使用して実現できます。

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

.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 セレクターを調整することで、コードは、選択されたラジオ ボタンのラベルを正しくターゲットにし、必要なスタイルを適用するようになりました。

以上がCSSで選択したラジオボタンのラベルのスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。