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

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

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

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

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

: 【CSS】CSS3のflexboxで簡単に2カラムのレイアウトを作ってみる

ウェブサイトを作成する際、2カラムや3カラムのレイアウトにしようとすると float や position を使わないと出来ませんでしたが、CSS3では数行のコードで実現可能。忘備録としてポストしておきます。

: 【CSS】リストの奇数・偶数・指定番目などを指定して装飾する方法

リストの奇数・偶数・指定番目などを指定して装飾する方法を備忘録としてポストします。

: 【CSS】文字や画像は透過させず、背景のみ透明度を操作する方法

ボックスの透明度を操作する時に「opacity」を使うと、文字や画像までもが透過してしまうので、「background-color:rgba();」を使い、アルファ値を設定することで背景の透明度のみを操作する方法を紹介します。

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

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

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

jQueryを使う

CSSのみで制御する

デモ

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

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

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

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

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

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