CSSでラジオボタンにデザイン性を持たせて配置する方法

2022.2.28｜コーディング

お問い合わせフォームや、登録フォームといったフォームを利用する時に配置する「ラジオボタン」に、デザイン性を持たせたり、スタイリッシュなデザインを求め、少し変化を加えたい時は、CSSを使って設定することができます。
「html5」や「css3」が登場したことが切っ掛けに、「ラジオボタン」や「チェックボックス」にデザイン性を加える事が出来る様になりましたね。「ラジオボタン」カスタマイズするためには、通常時に設定している標準スタイルを非表示に設定する事でデザイン性を持たせることができます。

今回は、CSSでラジオボタンにデザイン性を持たせる配置する方法を解説します。

CSSでラジオボタンにデザイン性を持たせて配置する方法

CSSでラジオボタンにデザイン性を持たせる場合は、「ラジオボタン」の機能を非表示にする必要があります。 CSSで「input[type=checkbox]」に「display:none;」要素を記述して、ラジオボタンを非表示にしてからデザインを設計します。

ラジオボタンを大きくして配置するデザイン

htmlに「input」と「label」を記述してラジオボタンを配置します。
配置したラジオボタンは「input」と「label」を記述しますが、inputタグの「id属性」とlabelタグの「for属性」を同じ値にすることでラジオボタンとテキストを紐付ける事ができます。
「name属性」には、ラジオボタンのグループを指定する名前を記述します。

例

電話
FAX
来社
お問い合わせ

HTMLの記述

<div class="list">
<ul>
<li><input type="radio" name="radio01" class="radio01" id="radio01-1"><label for="radio01-1">電話</label></li>
<li><input type="radio" name="radio01" class="radio01" id="radio01-2"><label for="radio01-2">FAX</label></li>
<li><input type="radio" name="radio01" class="radio01" id="radio01-3"><label for="radio01-3">来社</label></li>
<li><input type="radio" name="radio01" class="radio01" id="radio01-4"><label for="radio01-4">お問い合わせ</label></li>
</ul>
</div>

CSSの記述

.list {

}
.list ul li{
	margin:0 5px 50px 0;
	display:inline-block;
}
/* ラジオボタン01 */
.radio01{
  display: none;
}
.radio01 + label{
  padding-left: 22px;
  position:relative;
  margin-right: 22px;
}
.radio01 + label::before{
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border: 1px solid #999;
  border-radius: 50%;
}
.radio01:checked + label{
  color: #009a9a;
}
.radio01:checked + label::after{
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 11px;
  height: 11px;
  background: #0171bd;
  border-radius: 50%;
}

ラジオボタンを四角いボタンにして配置するデザイン

例

電話 FAX 来社お問い合わせ

HTMLの記述

<div class="radio02">
<input name="test" id="select1" value="1" checked="" type="radio"><label for="select1">電話</label>
<input name="test" id="select2" value="2" type="radio"><label for="select2">FAX</label>
<input name="test" id="select3" value="3" type="radio"><label for="select3">来社</label>
<input name="test" id="select4" value="4" type="radio"><label for="select4">お問い合わせ</label>
</div>

CSSの記述

/* ラジオボタン02 */
.radio02{
	float: left;	
	width: 100%;	
	margin:0 0 50px 0;
}
.radio02 input{
	display: none;
}
.radio02 label{
	display: block;
	float: left;
	cursor: pointer;
	width: 180px;
	margin: 1px 0 1px 0;
	padding: 1.4% 0 1.5% 0;
	border-right: 1px solid #d7d7d7;
	background: #e5e5e5;
	color: #555e64;
	font-size: 14px;
	text-align: center;
	line-height: 1;
	transition: .2s;
}
.radio02 label:first-of-type{
}
.radio02 label:last-of-type{
	border-right: 0px;
}
.radio02 input[type="radio"]:checked + label {
	background-color: #a1b91d;
	color: #fff;
}