ついつい押したくなる、CSS3を使ったラジオボタンのデザイン
フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。
サンプルを用意しましたのでご覧ください。IE9以降に対応しています。IE8以下はすいません。。
ではサンプル１からコードを紹介していきます。
サンプル１
二択のラジオボックスです。「はい」を押したときと、「いいえ」を押したときの色を変えています。
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つでしたが、今度は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;
}
サンプル３
最後はラジオボタンっぽいボタンを擬似要素で作っています。
HTML
まずは、HTMLです。先ほどのものと同じ仕組みです。
サンプル３
こちらは先ほどと同じです。
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からの対応ですし微妙なサンプルですが、お役に立ったならうれしいです。
@webpark2さんのツイート
