スマホ(Android,iphone)でタップしやすいラジオボタン【CSS】

デフォルトのラジオボタンはタップしづらく、スマートフォンユーザーの操作性を大きく損なう可能性があります。

labelタグを使用しても、タップ範囲はボタンと文字列だけなので、ユーザビリティが大きく改善するのか、といわれると微妙と言わざるを得ません。

JavaScriptを使用せず、CSSだけでスマートフォンからもタップしやすいボタンの実装方法を忘備録も兼ねて書いていきたいと思います。

レスポンシブにも対応しています。

完成したタップ領域の広いラジオボタン

ラジオボタンの完成系(デモ)は下記になります。かなりシンプルにCSSを作っているため、軽量で拡張性が高いと思います。

お好きにカスタマイズしてみてください:)

PR

ラジオボタンを透明に

順を追って解説していますが、手っ取り早くスタイルシートをコピペで使いたい人は 完成までジャンプして下さい。

1. ラジオボタンを透明に
2. チェックされたラベルの色を変更
3. 回り込み指定し、余白を省く
4. 操作性をUPさせる
5. 見た目を整える
6. 完成

<div class="radio_area">
	<ul>
		<li>
			<input type="radio" name="radio_group" value="選択肢1" id="no1">
			<label for="no1">選択肢1</label>
		</li>
		<li>
			<input type="radio" name="radio_group" value="選択肢2" id="no2">
			<label for="no2">選択肢2</label>
		</li> 
		<li>
			<input type="radio" name="radio_group" value="選択肢3" id="no3">
			<label for="no3">選択肢3</label>
		</li> 
		<li>
			<input type="radio" name="radio_group" value="選択肢4" id="no4">
			<label for="no4">選択肢4</label>
		</li> 
	</ul>
</div>

上記HTMLにスタイルをあてて、見本のようなラジオボタンを実装していきたいと思います。

手順1：ラジオボタンを透明に

まずはopacityを使ってラジオボタンを透明にします。

/* radioボタンを透明に */
.radio_area ul li input{
	opacity: 0;
}

手順2：チェックされたラベルの色を変更

ラジオボタンを透明にしてしまったので、チェックの有無の判別がつかなくなりました。

チェック時にラベルに色をつけ、選択項目をわかりやすくします。

/* 選択時のラベルの色 */
.radio_area ul li input[type="radio"]:checked + label {
	background-color: #BBB;
	color: #FFF;
}

手順3：回り込み指定し、余白を省く

透明にしたradioボタンと、labelタグが縦に並んでいる状態なので、回り込み処理を行います。

またliタグに回り込み解除のための指定を行います。

/* 回り込み指定を追加 */
.radio_area ul li input{
	float:left;
	opacity: 0;
}

/* 回り込み解除 */
.radio_area ul li:after{
	content:"";
	display: block;
	clear: both;
	height: 0;
	visibility:hidden;
}

手順4：操作性をUPさせる

次にラベルの有効範囲を広げ、タップ領域を確保します。また、マウスがlabelの上に乗った時、マウスカーソルを指の形に指定します。

/* タップ領域を確保 */
.radio_area ul li label{
	display:block;
	width:100%;
	padding:10px 0;
}

/* マウスオンでカーソルをポインターに */
.radio_area ul li label:hover{
	cursor:pointer;
}

手順5：見た目を整える

最後にリストマーカーを非表示にしつつ、liに線を指定して見た目を整えれば完成です。

/* リストマーカーの指定をなしに */
.radio_area ul{
	list-style-type:none;
}

/* liに下線を追加 */
.radio_area ul li{
	border-bottom:solid 1px #EEE;
}

/* 最初のliのみtopに線を追加 */
.radio_area ul li:first-child{
	border-top:solid 1px #EEE;
}

完成

下記ソースをコピペで利用いただけます。

.radio_area ul{
	list-style-type:none;
}


.radio_area ul li{
	border-bottom:solid 1px #EEE;
}

/* 最初のliのみtopに線を追加 */
.radio_area ul li:first-child{
	border-top:solid 1px #EEE;
}

/* 回り込み解除 */
.radio_area ul li:after{
	content:"";
	display: block;
	clear: both;
	height: 0;
	visibility:hidden;
}

.radio_area ul li input{
	float:left;
	opacity: 0;
}

/* 選択時のラベルの色 */
.radio_area ul li input[type="radio"]:checked + label {
	background-color: #BBB;
	color:#FFF;
}


.radio_area ul li label{
	display:block;
	width:100%;
	padding:10px 0;
}

.radio_area ul li label:hover{
	cursor:pointer;
}