WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >CSS

お問い合わせフォームを制作している際、チェックボックスやラジオボタンのデザインをサイトの雰囲気に合わせたり、スマートフォン表示にするときに使いやすいようにデザインを変えたい！と思ったことはありませんか？
デフォルトのままだとlabelタグで囲っていたとしても、スマートフォンで操作するときは指でタップするので押しづらいこともあるかと思います。また誤タップの原因にもなりえます。
スマートフォン表示になったときでも使いやすいフォームにするため、今回はチェックボックスはトグルボタン、ラジオボタンはボタンデザインに変更するCSSをご紹介します！

チェックボックスをトグルボタンのデザインへ変更する記述

チェックボックスをトグルボタンにしたhtmlを見てみましょう。

See the Pen
チェックボックス-css by saki kurita (@saki_0415)
on CodePen.

チェックがオフの状態ではグレーで、タップしてチェックをするとブルーに変更されます。
通常のチェックボックスですと有効範囲が小さく誤操作の原因になりますが、トグルボタンにするとチェック範囲が広くなりスマートフォンでの操作がしやすくなりますね。

こちらを実現するHTMLとCSSについて細かく見ていきましょう。

チェックボックス用HTML

<div>
<p>メールマガジンを登録しますか？</p>
<div class="switch-area">
  <input type="checkbox" id="switch1">
  <label for="switch1"><span></span></label>
  <div id="switch-btn"></div> /*【トグルボタンの丸部分になります】*/
</div>
</div>

チェックボックス用CSS

.switch-area {
  position       : relative;
  width          : 80px;
  background     : #fff;
}

.switch-area input[type="checkbox"] {
  display        : none;  /*【チェックボックスを非表示にします】*/
}

.switch-area label {
  display        : block; /*【ボックス要素に変更して、楕円の囲いを形成します】*/
  box-sizing     : border-box;
  height         : 40px;
  border         : 2px solid #999999;
  border-radius  : 30px;
}

.switch-area input[type="checkbox"]:checked +label {
  border-color   : #28A7E1;
}

 /*丸部分のデザイン*/
.switch-area #switch-btn {
  position       : absolute;
  width          : 30px;
  height         : 30px;
  background     : #999999;
  top            : 4px;
  left           : 4px;
  border-radius  : 26px;
  transition     : .2s;
}

 /*丸部分のデザイン　ONの時*/
.switch-area input[type="checkbox"]:checked ~ #switch-btn {
  transform      : translateX(40px);　/*【ONになったら丸を右へ移動させる】*/
  background     : #28A7E1;
}

ポイントとなるのは、まずチェックボックスを非表示にした上、labelタグでborderを作ります。

タグにトグルボタン内側の丸を作り、チェックされたらその丸が右へ移動かつ色が変更されるようにしています。
これでトグルボタンの見た目のチェックボックスの出来上がりです。

続いて、ラジオボタンを通常のボタンの見た目にCSSで変えていきます。

ラジオボタンをボタンのデザインへ変更する記述

See the Pen
ラジオボタン-css by saki kurita (@saki_0415)
on CodePen.

ラジオボタン用HTML

<ul class="select-radio select-radio-inline">
	<li class="select-radio-item"><input checked id="radio-btn1" name="radiogroup" type="radio" value="1"> <label class="select-radio-label" for="radio-btn1">はい</label></li>
	<li class="select-radio-item"><input id="radio-btn2" name="radiogroup" type="radio" value="2"> <label class="select-radio-label" for="radio-btn2">いいえ</label></li>
	<li class="select-radio-item"><input id="radio-btn3" name="radiogroup" type="radio" value="3"> <label class="select-radio-label" for="radio-btn3">どちらともいえない</label></li>
</ul>

ラジオボタン用CSS

body * {
	box-sizing: border-box;
}
.select-radio {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
.select-radio .select-radio-item {
	margin: 5px 0;
	padding: 0;
}
.select-radio input[type="radio"] {
	display: none; /*【ラジオボタンを非表示にします】*/
}
.select-radio input[type="radio"]:checked+label { /*【チェックが入ったらブルーのボタンに変更する】*/
	background: #C0E8FF;
	color: #333333;
	border: 2px solid #28A7E1;
}
.select-radio .select-radio-label {
	display: block;
	width: 100%;
	text-align: center;
	padding: 10px;
	cursor: pointer;
	color: #333333;
	border: 2px solid rgba(0, 0, 0, 0);
	border-radius: 5px;
	background: #eee;
	transition: 0.2s;
	border-radius: 4px;
}
.select-radio.select-radio-inline .select-radio-item {
	display: block;
	max-width: 173px;
	width: 100%;
	margin-right: 10px;
}
.select-radio.select-radio-inline .select-radio-label {
	display: block;
}

ラジオボタンもチェックボックスの時と同様に、もともとあるラジオボタンのデザインをdisplay:none;で非表示にします。
そしてlabelタグでボタンデザインを作っていきます。CSSで見た目を変えることで、クリックできる範囲が大きくなりスマートフォンで見た時もタップがしやすくなりました。これらのCSSはブレイクポイントで表示させるタイミングを変えることで、PCとスマートフォンで見た目を切り替えることができます。

まとめ

PCではチェックボックスやラジオボタンをマウスで操作するのでそのままのデザインでも使い勝手は悪くないですが、タブレットやスマートフォン表示になったときのユーザビリティを考慮してCSSを使ってデザインを変えてあげるようにしましょう！