この記事ではチェック済のラジオボタンの選択肢の背景色を変更する方法を解説します。
CSSとJavaScriptを使った方法を解説します。
この記事の目次
CSSでラジオボタンの背景色を変更
CSSでチェック済の選択肢の背景色をつける方法です。
CSSの:checkedの擬似クラスセレクターと、隣接セレクターの+を使います。（≫CSSの「＋（プラス）」とは何？使い方は？）
デモ
サンプルコード
<input type="radio" name="trip" value="hokkaido" id="radio_1"><label for="radio_1">北海道</label>
<input type="radio" name="trip" value="okinawa" id="radio_2"><label for="radio_2">沖縄</label>
<input type="radio" name="trip" value="tokyo" id="radio_3"><label for="radio_3">東京</label>
<p id="target"></p>label {
padding: 10px;
}
input:checked + label {
background-color: #CEF6F5;
}チェックされた選択肢を:checkedで取得し、隣接するラベルにCSSを適用するという方法です。
チェックのデザインをカスタマイズ
ただし、チェックの丸がラベルに内包されていないので、背景色がついていません。
デザインが気になる方は「Font Awesomeでラジオボタンをデザインしてみる」でデザインを工夫すると良いです。
以下のように好きなようにCSSだけでカスタマイズすることができます。
<input type="radio" name="trip" value="hokkaido" id="radio_1" class="radiobutton"><label for="radio_1"><span class="radio-fontas"></span>北海道</label>
<input type="radio" name="trip" value="okinawa" id="radio_2" class="radiobutton"><label for="radio_2"><span class="radio-fontas"></span>沖縄</label>
<input type="radio" name="trip" value="tokyo" id="radio_3" class="radiobutton"><label for="radio_3"><span class="radio-fontas"></span>東京</label>
<p id="target"></p>label {
padding: 10px;
}
input:checked + label {
background-color: #CEF6F5;
}
.radiobutton {
display: none;
}
.radio-fontas {
vertical-align: middle;
font-size: 22px;
}
.radio-fontas:before {
font-weight: 900;
font-family: "Font Awesome 5 Free";
color: #ccc;
content: '\f192';
}
.radiobutton:checked + label > .radio-fontas:before {
color: #2db29c;
}JavaScript（getElementsByName）でラジオボタンの背景色を変更
次にJavaScriptを使ってラジオボタンの背景色を変更する方法です。
getElementsByNameを使います。（参考：getElementsByNameの使い方）
デモは以下です。
デモ
チェックした選択肢は背景色が水色に変更され、それ以外の選択肢は文字色がグレーになります。
サンプルコード
getElementsByName('NAME').item(i)でループを回し、checkedの有無によって条件分岐させています。
ポイントはループを回すことで、他の選択肢項目にもアクセスできるため、その要素もコントロールできることです。
選択した項目以外も何か動作させたい場合にはJavaScriptでgetElementsByNameを使う方法は適しています。
function tripchoice() {
var rdo_name = document.getElementsByName('trip') ;
for (var i=0; i < rdo_name.length; i++) {
var id = rdo_name.item(i).id;
if (rdo_name.item(i).checked) {
document.getElementById( id + "_lb").style.backgroundColor = '#CEF6F5';
document.getElementById( id + "_lb").style.color = '#000000';
} else {
document.getElementById( id + "_lb").style.backgroundColor = '#ffffff';
document.getElementById( id + "_lb").style.color = '#999999';
}
}
}<label id="trip_1_lb"><input type="radio" name="trip" id="trip_1" value="hokkaido" onclick="tripchoice()">北海道</label>
<label id="trip_2_lb"><input type="radio" name="trip" id="trip_2" value="okinawa" onclick="tripchoice()">沖縄</label>
<label id="trip_3_lb"><input type="radio" name="trip" id="trip_3" value="tokyo" onclick="tripchoice()">東京</label>label {
margin: 10px;
padding: 10px;
border-radius: 3px;
background-color: #ffffff;
}inputとlabelのidの付け方を統一するのがポイントです。
JavaScript（getElementById）でラジオボタンの背景色を変更
ラジオボタンの項目に色を付けて目立たせる方法ではなく、特定の場所に選択項目を表示させる方法であれば、シンプルにJavaScriptのコードを記述することができます。
getElementByIdを使います。
デモ
サンプルコード
function tripchoice(value) {
var target = document.getElementById('target');
target.innerHTML = "<span>" + value + "</span>";
}<label><input type="radio" name="trip" value="hokkaido" onclick="tripchoice('北海道')">北海道</label>
<label><input type="radio" name="trip" value="okinawa" onclick="tripchoice('沖縄')">沖縄</label>
<label><input type="radio" name="trip" value="tokyo" onclick="tripchoice('東京')">東京</label>
<p id="target"></p>#target span {
background-color: yellow;
padding: 10px;
}まとめ
以上、CSSを使った方法とJavaScriptのgetElementsByNameとgetElementByIdを使ってラジオボタンの背景色を変更する方法でした。
基本的にはCSSで実装することが可能です。
他の項目をコントロールしたい場合にはgetElementsByNameを使うのが便利です。
