ラジオボタンの選択されたラベルをスタイリングする方法

選択されたラジオボタンのラベルをスタイリングするためには、CSSを使用します。以下にいくつかのシンプルな方法とコード例を示します。

1. ラベルの色を変更する: 選択されたラジオボタンのラベルの色を変更するには、以下のようなCSSを使用します。

input[type="radio"]:checked + label {
  color: red;
}

上記のコードでは、選択されたラジオボタンの直後にあるラベルの色を赤に変更しています。

2. ラベルの背景色を変更する: 選択されたラジオボタンのラベルの背景色を変更するには、以下のようなCSSを使用します。

input[type="radio"]:checked + label {
  background-color: yellow;
}

上記のコードでは、選択されたラジオボタンの直後にあるラベルの背景色を黄色に変更しています。

3. ラベルの装飾を変更する: 選択されたラジオボタンのラベルの装飾を変更するには、CSSのプロパティを使用してスタイルを指定します。以下は一例です。

input[type="radio"]:checked + label {
  font-weight: bold;
  text-decoration: underline;
}

上記のコードでは、選択されたラジオボタンの直後にあるラベルのフォントを太字にし、下線を追加しています。

これらはいくつかの基本的な方法ですが、ラジオボタンの選択されたラベルをスタイリングするためには、さまざまなCSSプロパティやセレクタを使用することができます。必要に応じて、より詳細なスタイリングを追加することもできます。

以上が、ラジオボタンの選択されたラベルをスタイリングする方法の例です。これらの方法を使用すると、ユーザーが選択したオプションを視覚的に強調することができます。