HTML,CSS

【CSS】擬似要素を使って選択済みラジオボタンの背景色を変更する方法

2019/12/16

かなり以前ですが、jQueryを使ってラジオボタンの背景色を変更するスクリプトを書いたのですが、ラジオボタン箇所が多くなると信じられないぐらいに重くなり、ブラウザが反応しなくなるという事態に陥ったので、CSSの疑似要素を使って制御する方法を紹介します。

その際に使用した方法を備忘録としてポストします。

ラジオボタンの背景色を制御する方法

jQueryを使う

以前作成したスクリプトはコチラから。

これでもある程度までは問題なかったのですが、ラジオボタンの数が増えると少し問題に。
具体的には先にも書きましたが、信じられないぐらいに重くなり、ブラウザが反応しなくなりました。

CSSのみで制御する

ここからが今回紹介する方法。
CSSの擬似要素を使って制御する方法です。

HTMLは以下の様な感じ。

テーブルを複数用意し、そのテーブルに class を付与。
ラジオボタンの内容は前回同様、CakePHP で作成されるものを基準としています。

「クリックされた場合」という意味の擬似要素 :checked を使用し、背景色の設定を行います。

デモ

デモはコチラから。

見た目は変わりませんが、圧倒的に軽くなっています。
CSSすごーい。

-HTML,CSS
-, , ,