2014/04/01
[CSS] Checkboxes and Radio Buttons with CSS and Font Awesome Icons
チェックボックスやラジオボタンをCSSとwebフォント（FontAwesome）で実装する方法です。
ポイント
- デフォルトのチェックボックス、ラジオボタンを消す。
- 初期設定として隣接セレクタと疑似要素でlabelタグにアイコンを指定する。
- 選択状態でlabelタグのアイコンを入れ替える。
DEMO
アイコンの指定のみ
CSS + アイコン
apple 風
HTML
CSS
/* 共通 */
li {
margin-bottom:1em;
}
label {
position:relative;
display: inline-block;
line-height:1;
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
label:before, label:after {
position:relative;
content: "";
display: inline-block;
text-align:center;
font-family: FontAwesome;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
input[type=checkbox], input[type=radio] {
display: none;
}
/* -------------------- アイコンの指定のみ -------------------- */
label {
padding-left:1.8em;
}
label:before {
position: absolute;
top:-.1em;
left:-.3em;
width: 1.5em;
font-size:1.4em;
color:#c6c6c6;
}
input[type=checkbox] + label:before {
content: "\f096";
}
input[type=checkbox]:checked + label:before {
content: "\f14a";
color:#409AD5;
}
input[type=radio] + label:before {
content: "\f10c";
}
input[type=radio]:checked + label:before {
content: "\f192";
color:#409AD5;
}
/* -------------------- CSS + アイコン -------------------- */
label {
padding-left:1.8em;
}
label:before {
position: absolute;
top:-3px;
left:0;
width:1.25em;
height:1.25em;
line-height:1.25;
margin-right:.5em;
border-radius: 5px;
}
input[type=checkbox] + label:before {
content: "\f00c";
border:#bebebe 1px solid;
background:#fff;
color:rgba(255,255,255,0);
}
input[type=checkbox]:checked + label:before {
content: "\f00c";
border:#24A592 1px solid;
background:#2EB2A0;
color:rgba(255,255,255,1);
}
input[type=radio] + label:before {
border:#bebebe 1px solid;
border-radius: 2em;
background:#fff;
}
input[type=radio]:checked + label:before {
border:#24A592 1px solid;
}
input[type=radio] + label:after, input[type=radio]:checked + label:after {
position: absolute;
top:-3px;
left:0;
width:1.25em;
height:1.25em;
line-height:1.25;
border-radius:2em;
}
input[type=radio]:checked + label:after {
background:#2EB2A0;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);
box-shadow:0 0 0 1px #24A592 inset, 0 0 0 6px rgba(255,255,255,1) inset;
}
/* -------------------- apple 風 -------------------- */
label:before {
width:1.25em;
height:1.25em;
line-height:1.2;
margin-right:.5em;
border-radius: 5px;
}
input[type=checkbox] + label:before, input[type=radio] + label:before {
border:#bebebe 1px solid;
background:#fff;
background-image: -o-linear-gradient(top, #FFFFFF 0%, #F3F3F3 50%, #ECECEC 50%, #DDDDDD 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(50, #F3F3F3), color-stop(50, #ECECEC), color-stop(100, #DDDDDD));
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #F3F3F3 50%, #ECECEC 50%, #DDDDDD 100%);
background-image: linear-gradient(to bottom, #FFFFFF 0%, #F3F3F3 50%, #ECECEC 50%, #DDDDDD 100%);
color:rgba(255,255,255,0);
}
input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before {
border:#6C7993 1px solid;
background:#76C1FD;
background-image: -o-linear-gradient(top, #CAE6FD 0%, #8CC9FC 50%, #76C1FD 50%, #CFFFFF 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CAE6FD), color-stop(50, #8CC9FC), color-stop(50, #76C1FD), color-stop(100, #CFFFFF));
background-image: -webkit-linear-gradient(top, #CAE6FD 0%, #8CC9FC 50%, #76C1FD 50%, #CFFFFF 100%);
background-image: linear-gradient(to bottom, #CAE6FD 0%, #8CC9FC 50%, #76C1FD 50%, #CFFFFF 100%);
color:#001732;
}
input[type=checkbox] + label:before {
content: "\f00c";
}
input[type=radio] + label:before {
position:relative;
top:.2em;
border-radius: 2em;
}
input[type=radio] + label:after, input[type=radio]:checked + label:after {
position:absolute;
top:.58em;
left:.4em;
width:.5em;
height:.5em;
border-radius:1em;
}
input[type=radio]:checked + label:after {
background:#001732;
}
0 件のコメント :
コメントを投稿