Webデザイナーブログから学ぶホームページ制作

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

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

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

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

<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>

.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%;
}

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

<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>

/* ラジオボタン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;
}

html5やcss3が現れる前は、ラジオボタンやチェックボックスといったフォームで利用する機能は装飾するのは困難でしたが、html5やcss3が利用できるようになり、ラジオボタンやチェックボックスなどフォームで利用する機能が自由に装飾できデザインできるようになり幅が広がりましたね。