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

2016/02/12 2019/12/16

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

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

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

jQueryを使う

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

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

CSSのみで制御する

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

HTMLは以下の様な感じ。

<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>

<tr>

<td>

<label for="Sample1Flg1">Radio1 内容1</label>

<label for="Sample1Flg2">Radio1 内容2</label>

<label for="Sample1Flg3">Radio1 内容3</label>

<label for="Sample1Flg4">Radio1 内容4</label>

</td>

</tr>

</table>

<br>

<tr>

<td>

<label for="Sample2Flg1">Radio2 内容1</label>

<label for="Sample2Flg2">Radio2 内容2</label>

<label for="Sample2Flg3">Radio2 内容3</label>

<label for="Sample2Flg4">Radio2 内容4</label>

</td>

</tr>

</table>

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

.table1 input[type="radio"]:checked + label,
.table2 input[type="radio"]:checked + label {
    background-color: #d1ff8c;
    color: #333;
}

.table1 input[type="radio"]:checked + label,

.table2 input[type="radio"]:checked + label {

background-color: #d1ff8c;

color: #333;

}

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

デモ

デモはコチラから。

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

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

created by Rinker

SBクリエイティブ

-HTML,CSS
-radio, ラジオボタン, 擬似要素, 背景色

: HTML5+CSS3で構築する際のIE9以下への対策

システムを作成する際の確認する人のポリシー(？)でIEのバージョンが8という困ったことになったので、これはいい機会だと捉え、HTML5+CSS3対策の実験台となってもらいましたｗ

: ログイン画面デザイン100選

ちょっとでもテンションが上がるようなログイン画面にしてみたい、ってことでググりましたところ、海外のサイト（しかも2009年）の記事ですが、ログインのデザイン画面のみを集めたサイトを見つけました。

: HTML5 videoタグで背景に動画を使ったページを作る方法

背景に動画を使うサイトをよく見受けられるようになってきました。どうやって作って ...

: 【CSS】CSSでWEBサイトのフォントを「メイリオ」にする方法

個人的に「メイリオ」フォントが好きです。WEBサイトを作る時は表示にメイリオを使うようにするので、そのタグを忘備録としてポストします。

: 【CSS】画像を円形に切り抜く方法

CSSで画像を丸く切り抜く方法を備忘録としてポストします。

PREV: 節分、あびこ観音近くの夜店・屋台を回ってきたよ　2016年
NEXT: CakePHP2.4以降（2.6.x）でファイルをダウンロードする方法

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

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

jQueryを使う

CSSのみで制御する

デモ

【DIY】2x4や1x4など、SPF材サイズ早見表 (562,299)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (277,576)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (255,035)

【歴史】江戸幕府歴代将軍一覧 (142,981)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (128,971)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (128,047)