HTML,CSS

HTML,CSS

【CSS】ラジオボタンの背景色を選択肢によって変更する方法

2018/08/27

今までも何度か登場していますが、ラジオボタンの背景色。
今回は、選択肢によって色を変えれば見やすくなると思ったのでそれに対応したものの備忘録です。

ラジオボタンの背景色を変更する

シチュエーション

今回は、「手配済み」「未手配」というラジオボタンが舞台。
フラグを「手配済み」としたものは「手配済み」と表示する一覧画面。詳細画面にてそのフラグを操作するといったものです。

以前用意したラジオボタンの背景色変更スクリプトでは、選択内容がどれであっても同じ色が背景となり、一見してどちらを選択肢たのかが分かりづらい仕様だったので、「手配済み」の場合は一覧に表示するのと同じグリーンを背景色に、「未手配」の場合はグレーを背景色にするようにしてみました。

仕様イメージ

イメージとしては以下のような感じです
一覧で表示させる「手配済み」背景色と、ラジオボタンの背景色を合わせることで、どちらを選択肢たのかを判りやすくするのが今回の狙い。

↑ 一覧画面

↑「手配済み」選択時

↑「未手配」選択時

デモ

デモはこちらから

コード

HTML

ラジオボタンは平凡そのもの。特に変なことはしていません。

CSS

CSSはラジオボタンの value に対して判定を付け、疑似要素で背景色を付けているだけです。

使う人に少し優しいラジオボタンでした。

関連する投稿

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

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

-HTML,CSS
-, ,