【画像付き解説】HTML、CSS、JavaScriptでラジオボタンを自由自在にカスタマイズ
2024-06-21
HTML、CSS、フォームを使ってラジオボタンの色を変更する方法
HTML
ラジオボタンを作成する。
<input type="radio" id="radio1" name="gender" value="male"> <label for="radio1">男性</label> <input type="radio" id="radio2" name="gender" value="female"> <label for="radio2">女性</label>ラジオボタンにラベルを付ける。
<label for="radio1">男性</label> <label for="radio2">女性</label>
CSS
ラジオボタンのデフォルトスタイルをリセットする。
input[type="radio"] { appearance: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ccc; }チェックされたラジオボタンの色を変更する。
input[type="radio"]:checked { background-color: #007bff; border-color: #007bff; }ラジオボタンのラベルのスタイルを変更する (任意)。
label { display: inline-block; margin-right: 10px; cursor: pointer; }
説明
input[type="radio"]セレクタは、すべてのラジオボタンに適用されます。appearance: noneプロパティは、ブラウザのデフォルトのラジオボタンスタイルを無効化します。widthとheightプロパティは、ラジオボタンのサイズを設定します。border-radiusプロパティは、ラジオボタンの角の丸みを設定します。background-colorプロパティは、ラジオボタンの背景色を設定します。labelセレクタは、すべてのラジオボタンラベルに適用されます。display: inline-blockプロパティは、ラベルをインラインブロック要素として表示します。margin-rightプロパティは、ラベルと次の要素の間のマージンを設定します。cursor: pointerプロパティは、カーソルをラベルの上に置いたときにポインタカーソルを表示します。
補足
- 上記は基本的な例です。必要に応じて、スタイルをさらにカスタマイズできます。
- CSSフレームワークを使用して、ラジオボタンをより簡単にカスタマイズすることもできます。
- ラジオボタンの色だけでなく、サイズや形状を変更することもできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ラジオボタンの色を変更する</title>
<style>
/* CSSコード */
</style>
</head>
<body>
<h1>ラジオボタンの色を変更する</h1>
<form>
<input type="radio" id="radio1" name="gender" value="male">
<label for="radio1">男性</label>
<input type="radio" id="radio2" name="gender" value="female">
<label for="radio2">女性</label>
</form>
</body>
</html>
/* デフォルトスタイルのリセット */
input[type="radio"] {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #ccc;
}
/* チェックされたラジオボタンの色を変更 */
input[type="radio"]:checked {
background-color: #007bff;
border-color: #007bff;
}
/* ラベルのスタイルを変更 (任意) */
label {
display: inline-block;
margin-right: 10px;
cursor: pointer;
}
- HTMLコードは、フォームとラジオボタンを作成します。
- CSSコードは、ラジオボタンのデフォルトスタイルをリセットし、チェックされたラジオボタンの色を変更します。
- ラベルのスタイルは任意で変更できます。
このコードをどのように使用するか
- 上記のコードを
index.htmlなどのファイルに保存します。 - ファイルを Web ブラウザで開きます。
- ラジオボタンをクリックすると、色が変更されることを確認します。
カスタマイズ
- ラジオボタンの色を変更するには、
background-colorとborder-colorプロパティの値を変更します。 - ラジオボタンのサイズを変更するには、
widthとheightプロパティの値を変更します。 - ラベルのスタイルを変更するには、
labelセレクタ内のプロパティを変更します。
このサンプルコードを参考に、自分のニーズに合わせてラジオボタンをカスタマイズしてみてください。
ラジオボタンの色を変更するその他の方法
JavaScriptを使用して、ラジオボタンがクリックされたときに動的にスタイルを変更できます。 以下の例では、チェックされたラジオボタンの色を青色に変更します。
<input type="radio" id="radio1" name="gender" value="male">
<label for="radio1">男性</label>
<input type="radio" id="radio2" name="gender" value="female">
<label for="radio2">女性</label>
<script>
const radios = document.querySelectorAll('input[type="radio"]');
radios.forEach(radio => {
radio.addEventListener('click', () => {
if (radio.checked) {
radio.style.backgroundColor = 'blue';
radio.style.borderColor = 'blue';
} else {
radio.style.backgroundColor = '#ccc';
radio.style.borderColor = '#ccc';
}
});
});
</script>
ライブラリを使用する
BootstrapやFoundationなどのCSSフレームワークには、ラジオボタンを簡単にカスタマイズできるユーティリティクラスが含まれています。
SVGを使用して、独自のラジオボタンアイコンを作成できます。 以下の例は、青色の丸いラジオボタンアイコンを作成する方法を示しています。
<svg width="20" height="20">
<circle cx="10" cy="10" r="10" fill="#007bff"/>
</svg>
<input type="radio" id="radio1" name="gender" value="male" style="display: none;">
<label for="radio1">
<span class="radio-button"></span>
男性
</label>
<input type="radio" id="radio2" name="gender" value="female" style="display: none;">
<label for="radio2">
<span class="radio-button"></span>
女性
</label>
<style>
.radio-button {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
border: 2px solid #ccc;
cursor: pointer;
}
input[type="radio"]:checked + .radio-button {
background-color: #007bff;
border-color: #007bff;
}
</style>
html css forms
