HTML&CSS

【初心者でも簡単】ラジオボタンのデザインをオシャレに変更しよう！【html】

フォームの中でも使用頻度の高いラジオボタン。デフォルトの見た目では無機質に感じられることもありますが、CSSを活用することで、視覚的に魅力的で使いやすいデザインに変えることが可能です。
この記事では、基本から応用まで、ラジオボタンのカスタマイズ方法を徹底解説します！

カスタマイズしたラジオボタンの作成方法

本来のラジオボタンを非表示にする

ラジオボタンのデザインをカスタマイズする際は、デフォルトのラジオボタンを非表示にします。
デフォルトの見た目を非表示にすることで、自由にスタイリング可能になります。

input[type="radio"]{
    display: none;
}

labelタグで囲んだ<span>タグにスタイルを付与する

デフォルトのラジオボタンを作成したら、次にカスタマイズしたラジオボタンのデザインを作成します。
<label>タグでinput:radioと<span>タグで囲み、<span>タグにデザインを付与します。

<label><input type="radio" value="1" name="country"><span>日本</span></label>
label span {
    display: inline-block;
    color: #5BC0DE;
    border: 1px solid #5BC0DE;
    border-radius: 34px;
    padding: 5px 20px;
    width: 130px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    margin:0 5px;
}

チェックをつけた状態をデザインする

隣接兄弟コンビネータで、チェックが入っているラジオボタンの隣接する<span>タグを指定できます。
ここで、チェックが入った場合のスタイルを指定できます。

「+」隣接兄弟コンビネータ

このセレクタは、指定した要素に隣接する直後の兄弟要素を選択する。

label input:checked + span {
    color: #FFF;
    background: #5BC0DE;
}

ラジオボタンのデザインサンプル

作成方法はとても簡単でした。
いくつかラジオボタンのサンプルを作成しましたので、ぜひご参考にください。
ちなみに、デフォルトのラジオボタンは非表示にしている前提なので、そちらのCSSは省略しています。

ボタン型デザイン

ボタン型デザイン

<label><input type="radio" value="1" name="country"><span>日本</span></label>
<label><input type="radio" value="2" name="country"><span>中国</span></label>
<label><input type="radio" value="3" name="country"><span>アメリカ</span></label>
label span {
    display: inline-block;
    color: #5BC0DE;
    border: 1px solid #5BC0DE;
    border-radius: 34px;
    padding: 5px 20px;
    width: 130px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    margin:0 5px;
}

label input:checked + span {
    color: #FFF;
    background: #5BC0DE;
}

カード型デザイン

プランや商品を選択する場合に最適なデザインです。

カード型デザイン

<div class="card-radios">
	<label>
		<input type="radio" name="plan" value="basic">
		<div class="card">
			<h3>ベーシックプラン</h3>
			<p>月額¥1,000</p>
		</div>
	</label>
	<label>
		<input type="radio" name="plan" value="premium">
		<div class="card">
			<h3>プレミアムプラン</h3>
			<p>月額¥5,000</p>
		</div>
	</label>
</div>
.card-radios label {
	display: inline-block;
	width: 150px;
	margin: 10px;
	cursor: pointer;
}

.card {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 15px;
	text-align: center;
	transition: all 0.3s;
}

.card-radios input[type="radio"]:checked+.card {
	border-color: #007BFF;
	background-color: #f0f8ff;
	transform: translateY(-5px);
}

画像付きのラジオボタン

アイコンや画像付きで視覚的に選びやすいボタンです。

画像付きのラジオボタン

<div class="img-radio">
	<label>
		<input type="radio" name="plan" value="basic">
		<span>
			<img src="https://web-create-kokusyo.com/wp-content/uploads/2024/01/Group-44.png" style="">
			ベーシック
		</span>
	</label>
	<label>
		<input type="radio" name="plan" value="premium">
		<span>
			<img src="https://web-create-kokusyo.com/wp-content/uploads/2024/01/Group-46.png" style="">
			プレミアム
		</span>
	</label>
</div>
.img-radio label span {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s;
}

.img-radio input[type="radio"]:checked+span {
	background-color: #007BFF;
	color: white;
	border-color: #007BFF;
}

サークル型ステータスラジオボタン

丸いデザインのラジオボタンです。

サークル型ステータスラジオボタン

<div class="status-radios">
	<label>
		<input type="radio" name="status" value="ready">
		<span>準備中</span>
	</label>
	<label>
		<input type="radio" name="status" value="ongoing">
		<span>進行中</span>
	</label>
	<label>
		<input type="radio" name="status" value="completed">
		<span>完了済み</span>
	</label>
</div>
.status-radios label span {
	display: inline-block;
	width: 100px;
	height: 100px;
	line-height: 100px;
	border-radius: 50%;
	text-align: center;
	border: 3px solid #ccc;
	background-color: #f9f9f9;
	transition: all 0.3s;
    padding: 5px 10px;
}

.status-radios input[type="radio"]:checked+span {
	background-color: #4caf50;
	color: white;
	border-color: #4caf50;
	transform: scale(1.1);
}

まとめ

CSSを活用したラジオボタンのカスタマイズ方法を基本から応用まで解説しました。デザインに少し手を加えるだけで、フォーム全体の印象を大幅に向上させることができます。ぜひ参考にしてみてください！

-HTML&CSS
-,