スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

css3を使って、ラジオボタンをデザインする方法

css3で、ラジオボタンをデザインする方法。
考え方としては、<input type="radio"> をdisplay:none; で消して、それに連動する label のスタイルでデザインを整えると言う感が方。

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

■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;
}


参考サイト
CSS3を使ってラジオボタンをデザイン
スポンサーサイト

トラックバック

コメント

コメントを残す

Secret


プロフィール

U2K

Author:U2K
いろいろプログラムに関しての覚え書きをちょくちょくと書いていきます。

オススメ










オススメ

忍者AdMax

u2k on Twitter

最近の記事


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。