CSSで選択中のラジオボタンに続く要素を太字にする
CSS3で選択中のラジオボタンに続く要素を太字にするサンプル。以下の例だとラベル要素が太字になります。現在選択中のものから別の選択肢に切り替えれば、当然ながら、そちらが瞬時に太字になります。
別のCSSプロパティを与えれば、太字以外の表現も可能です。例えば、選択中のものを赤色にする等。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLサンプル</title> <style type="text/css"> input[type="radio"]:checked + label { font-weight: bold; } </style> </head> <body> <input type="radio" name="sampleRadio" id="sampleRadio1" value="1"><label for="sampleRadio1">選択肢1</label> <input type="radio" name="sampleRadio" id="sampleRadio2" value="2"><label for="sampleRadio2">選択肢2</label> </body> </html> |
表示例
