ついつい押したくなる、CSS3を使ったラジオボタンのデザイン

フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。

radiobutton00.png

サンプルを用意しましたのでご覧ください。IE9以降に対応しています。IE8以下はすいません。。

ではサンプル1からコードを紹介していきます。

サンプル1

radiobutton01.png

二択のラジオボックスです。「はい」を押したときと、「いいえ」を押したときの色を変えています。

HTML

では、HTMLから。

<div class="sample">
    <input type="radio" name="s2" id="on" value="1" checked="">
    <label for="on" class="switch-on">はい</label>
    <input type="radio" name="s2" id="off" value="0">
    <label for="off" class="switch-off">いいえ</label>
</div>

特に問題もないと思いますが、フォームを使わない人にとってはlabelは馴染みがないかもしれません。この例でいうと、labelのforの値が「on」のものをクリックすると、inputのidの値が「on」ものにチェックが入ることになります。

forやidを使わず、labelの中にinputを入れて連動させる方法もありますが、今はあまり使わないようです。

CSS

続いて、CSSです。まずはすべて載せて、後で個別に解説します。

.sample input {
	display: none;
}
.sample label{
	display: block;
	float: left;
	cursor: pointer;
	width: 60px;
	margin: 0;
	padding: 10px;
	background: #bdc3c7;
	color: #869198;
	font-size: 16px;
	text-align: center;
	line-height: 1;
	transition: .2s;
}
.sample label:first-of-type{
	border-radius: 3px 0 0 3px;
}
.sample label:last-of-type{
	border-radius: 0 3px 3px 0;
}
.sample input[type="radio"]:checked + .switch-on {
	background-color: #a1b91d;
	color: #fff;
}
.sample input[type="radio"]:checked + .switch-off {
	background-color: #e67168;
	color: #fff;
}

最初のサンプルのみ個別に説明します。コードの後に解説を書いています。

.sample input {
	display: none;
}

ボタンは後で出てくるlabelで作るため、ラジオボタンは表示しません。

.sample label{
	display: block;
	float: left;
	cursor: pointer;
	width: 60px;
	margin: 0;
	padding: 10px;
	background: #bdc3c7;
	color: #869198;
	font-size: 16px;
	text-align: center;
	line-height: 1;
	transition: .2s;
}

ボタンの内容になります。ここではチェックされていない状態になります。ボタンの大きさを変えたい場合は、widthやpaddigを変更してください。

.sample label:first-of-type{
	border-radius: 3px 0 0 3px;
}
.sample label:last-of-type{
	border-radius: 0 3px 3px 0;
}

1つ目のlabelの左上と左下、2つ目のlabelの右上と右下の角を丸くします。「first-child」と「last-child」を使ってしまいがちなところですが、「first-child」だと子要素全体で最初のものになりますので、このサンプルだと「input」になります。

「label:first-of-type」だとlabelのなかで最初のものということになります。この辺の違いは以前記事にしていますのでぜひご覧ください。

.sample input[type="radio"]:checked + .switch-on {
	background-color: #a1b91d;
	color: #fff;
}
.sample input[type="radio"]:checked + .switch-off {
	background-color: #e67168;
	color: #fff;
}

チェックが入ったボタンの色の指定です。クラス名によって色を変えています。

サンプル2

radiobutton02.png

先ほどは2つでしたが、今度は5つです。クリックしたときの色がすべて同じなので、こちらのほうが簡単です。

HTML

まずは、HTMLです。先ほどのものはlabelに対して個別にクラス名を付けていましたが、チェックが入ったときの色が同じなので、今回は必要ありません。

クリックしたときの色がすべて同じなので、labelにclassやidを付ける必要もありません。

CSS

続いて、CSSです。ボーダーが付いたくらいで後は先ほどのサンプルと同じです。

.sample input{
	display: none;
}
.sample label{
	display: block;
	float: left;
	cursor: pointer;
	width: 80px;
	margin: 0;
	padding: 12px 5px;
	border-right: 1px solid #abb2b7;
	background: #bdc3c7;
	color: #555e64;
	font-size: 14px;
	text-align: center;
	line-height: 1;
	transition: .2s;
}
.sample label:first-of-type{
	border-radius: 3px 0 0 3px;
}
.sample label:last-of-type{
	border-right: 0px;
	border-radius: 0 3px 3px 0;
}
.sample input[type="radio"]:checked + label {
	background-color: #a1b91d;
	color: #fff;
}

サンプル3

radiobutton03.png

最後はラジオボタンっぽいボタンを擬似要素で作っています。

HTML

まずは、HTMLです。先ほどのものと同じ仕組みです。

サンプル3

こちらは先ほどと同じです。

CSS

続いて、CSSです。:before擬似要素でグレーの丸を、:after擬似要素でチェックが入ったときの緑の丸を作っています。

.sample input{
	display: none;
}
.sample label{
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-left: 20px;
	padding: 10px 20px;
	border-radius: 2px;
	color: #3e4956;
	font-size: 14px;
	text-align: center;
	line-height: 1;
}
.sample label:before{
	position: absolute;
	content: "";
	top: 50%;
	left: -10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #bdc3c7;
	border-radius: 50%;
}
.sample input[type="radio"]:checked + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: -4px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: #879c18;
}

さいごに

ということで、今回はCSS3を使ったラジオボタンのデザインについてサンプルを紹介しました。

ラジオボタンは、1つにチェックを入れると他のチェックが外れるという珍しい動きをします。以前、この動作を使ってこんなサンプルも作りました。

どちらもjQueryを使えば作れます。ちなみに、最初のサンプルは、元々「jQueryとCSS3を使ったアコーディオンメニューを詳しく説明します|Webpark」という記事があって、CSSだけでも作れる方法を考えたものです。

個人的には、今までjQueryで作っていた動きのあるものを、CSSだけでも表現することができるというのはとても面白いです。ラジオボタンの使い方として正しいのかという意見はあると思いますが。。

IE9からの対応ですし微妙なサンプルですが、お役に立ったならうれしいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
これがやりたかったのですが、サンプルはChromeでもIE10でも動作しないようです。
【2014/06/03 09:44】 | - #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加