【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, ラジオボタン, 擬似要素, 背景色

: 【HTML】a要素（aタグ）で電話発信用リンクを設定する方法

a要素の href 属性に電話番号を設定するだけでスマートフォンで電話発信用のリンクを作成することが可能です。その方法を備忘録としてポストします。

: 【CSS】CSSの「overflow:scroll」でボックス領域にスクロールバーを表示させる方法。

決まったサイズのDIV領域に「overflow」を設定し、スクロールバーを表示させて狭い範囲でも有効に利用する方法です。

: 【JS】jQueryとCSSで作る「ハンバーガーメニュー」を少しリニューアルしてみました

以前作成したjQueryとCSSで作る「ハンバーガーメニュー」に少し手を入れて、もうちょっとだけ使えるものにしてみましたのでご紹介したいと思います。

: WEBアイコンフォントの font-awesome を背景として指定する方法

WEBアイコンフォントで有名な「font-awesome」のアイコンをh1などの標題で使う際、各ページの標題に埋めるのもメンテナンスが大変なので背景に出来ないかと思ったので、その方法を備忘録としてポストします。