(Sample)

cssのプロパティaccent-colorを使って以下のように色を変えることができます。

ポイントは以下の疑似要素です。

input[class="m"]

疑似要素 input[class="m"] は、クラス名が "m" のすべての要素を選択するCSSセレクタです。

指定したクラス名を持つ 要素に対して特定のスタイルを適用するために使用されます。

特定のスタイルやレイアウトを一貫して適用する際に便利です。

<!DOCTYPE html>
<html>
    <head>
        <title>accent-color.html</title>
        <meta charset="UTF-8">
        <style>
            input[class="m"] {    <!-- "m"というクラスを持つinput要素（この場合は男性用のラジオボタン）に対するスタイルルールを定義します。 -->
                accent-color: blue;    <!-- アクセントカラー（この場合はラジオボタンの色）を青に設定します。 -->
            }

            input[class="f"] {    <!-- "f"というクラスを持つinput要素（この場合は女性用のラジオボタン）に対するスタイルルールを定義します。 -->
                accent-color: red;    <!-- アクセントカラーを赤に設定します。 -->
            }
        </style>
    </head>
    <body>
        <input type="radio" name="gender" class="m" /><label>男性</label>
        <input type="radio" name="gender" class="f"/><label>女性</label>
    </body>
</html>
Webアプリケーション制作のための小ネタ集　目次に戻る

ラジオボタンのラベルの色を変化させて押しやすくする　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる