【CSS】擬似要素を使って選択済みラジオボタンの背景色を変更する方法
2019/12/16
かなり以前ですが、jQueryを使ってラジオボタンの背景色を変更するスクリプトを書いたのですが、ラジオボタン箇所が多くなると信じられないぐらいに重くなり、ブラウザが反応しなくなるという事態に陥ったので、CSSの疑似要素を使って制御する方法を紹介します。
その際に使用した方法を備忘録としてポストします。
ラジオボタンの背景色を制御する方法
jQueryを使う
以前作成したスクリプトはコチラから。
ラジオボタンの背景色をjQueryを使って変更してみる その２ | Wataame Frog
https://nodoame.net/archives/5758
https://nodoame.net/archives/5758
これでもある程度までは問題なかったのですが、ラジオボタンの数が増えると少し問題に。
具体的には先にも書きましたが、信じられないぐらいに重くなり、ブラウザが反応しなくなりました。
CSSのみで制御する
ここからが今回紹介する方法。
CSSの擬似要素を使って制御する方法です。
HTMLは以下の様な感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<table border="1" cellpadding="5" cellspacing="0" class="table1"> <tr> <th>ラジオ１</th> <td> <input type="radio" name="data[Sample1][flg]" id="Sample1Flg1" value="1" /> <label for="Sample1Flg1">Radio1 内容1</label> <input type="radio" name="data[Sample1][flg]" id="Sample1Flg2" value="2" /> <label for="Sample1Flg2">Radio1 内容2</label> <input type="radio" name="data[Sample1][flg]" id="Sample1Flg3" value="3" /> <label for="Sample1Flg3">Radio1 内容3</label> <input type="radio" name="data[Sample1][flg]" id="Sample1Flg4" value="4" /> <label for="Sample1Flg4">Radio1 内容4</label> </td> </tr> </table> <br> <table border="1" cellpadding="5" cellspacing="0" class="table2"> <tr> <th>ラジオ２</th> <td> <input type="radio" name="data[Sample2][flg]" id="Sample2Flg1" value="1" /> <label for="Sample2Flg1">Radio2 内容1</label> <input type="radio" name="data[Sample2][flg]" id="Sample2Flg2" value="2" /> <label for="Sample2Flg2">Radio2 内容2</label> <input type="radio" name="data[Sample2][flg]" id="Sample2Flg3" value="3" /> <label for="Sample2Flg3">Radio2 内容3</label> <input type="radio" name="data[Sample2][flg]" id="Sample2Flg4" value="4" /> <label for="Sample2Flg4">Radio2 内容4</label> </td> </tr> </table> |
テーブルを複数用意し、そのテーブルに class を付与。
ラジオボタンの内容は前回同様、CakePHP で作成されるものを基準としています。
|
1 2 3 4 5 |
.table1 input[type="radio"]:checked + label, .table2 input[type="radio"]:checked + label { background-color: #d1ff8c; color: #333; } |
「クリックされた場合」という意味の擬似要素 :checked を使用し、背景色の設定を行います。
デモ
デモはコチラから。
選択されたラジオボタンの背景色を変更してみる Part3
https://lightning-bolt.xyz/js/jquery.tgRadioBackColorChange/index3.html
https://lightning-bolt.xyz/js/jquery.tgRadioBackColorChange/index3.html
見た目は変わりませんが、圧倒的に軽くなっています。
CSSすごーい。
