【CSSで解決！】フォームをもっとオシャレに！チェックボックス＆ラジオボタンのカスタマイズ術

2024-05-19

CSS でチェックされたラジオボタンのラベルをスタイリングする方法

方法1: :checked 擬似クラスを使用する

これは最も一般的で簡単な方法です。以下の CSS コードは、チェックされたラジオボタンに隣接するラベルに太字の青色テキストを設定します。

input[type="radio"]:checked + label {
  font-weight: bold;
  color: blue;
}

この方法は、より新しい CSS セレクターを使用しており、より柔軟なスタイリングが可能です。以下の CSS コードは、チェックされたラジオボタンを含むラベルに太字の青色テキストを設定します。

label:has([type="radio"]:checked) {
  font-weight: bold;
  color: blue;
}

補足:

上記の例では、ラジオボタンの type 属性が "radio" であることを前提としています。
ラベルとラジオボタンの HTML 構造は次のとおりである必要があります。

<label for="radio1">オプション 1</label>
<input type="radio" id="radio1" name="radioGroup">

<label for="radio2">オプション 2</label>
<input type="radio" id="radio2" name="radioGroup">

複数のラジオボタングループがある場合は、name 属性を使用してグループを区別する必要があります。
より複雑なスタイリングを行う場合は、CSS セレクターの詳細な知識が必要となります。

HTML:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>チェックされたラジオボタンのラベルをスタイリング</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>ラジオボタンのラベル</h2>
  <form>
    <label for="radio1">オプション 1</label>
    <input type="radio" id="radio1" name="radioGroup">

    <label for="radio2">オプション 2</label>
    <input type="radio" id="radio2" name="radioGroup">

    <label for="radio3">オプション 3</label>
    <input type="radio" id="radio3" name="radioGroup">
  </form>
</body>
</html>

CSS:

/* style.css */

input[type="radio"]:checked + label {
  font-weight: bold;
  color: blue;
}

このコードを実行すると、以下のようになります。

最初に選択されていないラジオボタンのラベルは、黒色の標準フォントで表示されます。
ラジオボタンを選択すると、そのラベルは太字の青色で表示されます。

このサンプルコードを参考に、独自のスタイリングを作成することができます。

以下の例では、has() 擬似クラスを使用して、チェックされたラジオボタンを含むラベルにスタイリングを設定しています。

label:has([type="radio"]:checked) {
  font-weight: bold;
  color: blue;
}

このコードは、上記の :checked 擬似クラスを使用したコードと同じように動作します。

このサンプルコードは、CSS でチェックされたラジオボタンのラベルをスタイリングする方法を理解するのに役立ちます。独自のスタイリングを作成するには、このコードを参考に、CSS セレクターと擬似クラスに関する知識を活用してください。

CSS でチェックされたラジオボタンのラベルをスタイリングするその他の方法

この方法は、ラジオボタンラベルの上にカーソルを置いたときにのみスタイリングを適用する場合に使用できます。以下の CSS コードは、カーソルを置いたラジオボタンラベルに太字の青色テキストを設定します。

input[type="radio"]:hover + label {
  font-weight: bold;
  color: blue;
}

長所:

カーソル操作によるインタラクションを示すのに役立ちます。

チェックされた状態のみにスタイリングを適用することはできません。

方法 2: JavaScript を使用する

この方法は、より複雑なスタイリングを実装する場合に使用できます。以下の JavaScript コードは、チェックされたラジオボタンのラベルに太字の青色テキストを設定します。

const radios = document.querySelectorAll('input[type="radio"]');

radios.forEach(radio => {
  radio.addEventListener('change', () => {
    const label = document.querySelector(`label[for="${radio.id}"]`);
    if (radio.checked) {
      label.style.fontWeight = 'bold';
      label.style.color = 'blue';
    } else {
      label.style.fontWeight = '';
      label.style.color = '';
    }
  });
});