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

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

この例では、選択したラジオ ボタンのラベルをスタイルすることを目的としています。ただし、提供された CSS は意図したとおりに機能しないようです。 HTML と CSS コードを分析して問題を特定しましょう。

HTML コードには、ラジオ ボタンとそのラベルを保持するクラス「radio-toolbar」の div が含まれています。各ラジオ ボタンは、display: none; を使用して非表示になります。ラベルには、背景色、境界線、パディングなどのスタイルが適用されています。

CSS に進むと、最初のルールはラジオ ボタンの入力を非表示にしますが、これは正しいです。 2 番目のルールは、ラベル自体のスタイルを設定します。問題は、選択されたラジオ ボタンのラベルをスタイルすることを目的とした 3 番目のルールにあります。

3 番目のルールでは、次のコードを使用して、チェックされたラジオ ボタンのすぐ隣にあるラベル要素を選択しようとしています。セレクター: .radio-toolbar label input[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 label に変更することで、チェックされたラジオ ボタン入力に続くラベルに背景色が適用されるようにします。

機能に関する追加の変更

セレクターの問題とは別に、他にもいくつかの変更を加えることができます。機能を向上させるため:

1. ラベルを整列させるには、ラベルに inline-block を使用することをお勧めします。
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 中国語 Web サイトの他の関連記事を参照してください。