CSS3制作iPhone的Checkbox
作者：大漠 日期：2012-03-20 点击：5173
iPhone上的UI的确是精致，让人爱不释手。今天用CSS3写了一个Checkbox的效果，采用了两种不同的方法来实现，另外在此基础上写了一个我们常用的checkbox的效果。
众所周知，想要美化表单中的元件，都少不了jQuery的帮忙，有关于这方面的介绍，本站也有过几篇相关的文章，比如说《美化表单——自定义单选按钮和复选按钮》、《自定义表单——JQuery制作个性化Checkbox》和《美化表单——自定义Checkbox和Radio样式》。那么有没有办法不使用jQuery呢？就是大家所说的纯CSS？如果你看了这篇文章后，你就会说，原来也可以实现呀。
今天这篇教程，我就想摆脱jQuery，使用CSS3来制作一个类似iPhone上的Checkbox效果。
针对上面的DEMO效果，下面我给大家介绍两种实现方法：
方法一：标签实现
实现原理
通过label标签的for属性来控制checkbox选择状态，至于选择和不选择此处使用ON和OFF来分别代替，接着借助一个空的标签来制作一个盖板，使用定位来遮住ON或者OFF，从而实现Checkbox的选择与否的效果。
HTML Markup
<div class="labelWrap"> <label for="onOff" id="sliderLabel"> <input type="checkbox" id="onOff" /> <span id="slider"> <span id="sliderOn">ON</span> <span id="sliderOff">OFF</span> <span id="slideBlock"></span> </span> </label> <span id="lableTitle">Wi-Fi</span> </div>
这里有一个关键处，是label标签的for属性值要与input[type="checkbox"]的id属性值一致。
CSS Code
/*-------------------------*\
* Demo1
\*-------------------------*/
.labelWrap {
width: 200px;
margin: 0 auto;
overflow: hidden;
}
/*==checkbox容器样式==*/
#sliderLabel {
border: 1px solid #555;
border-radius: 4px;
cursor: pointer;
display: block;
height: 30px;
overflow: hidden;/*==这个值很重要，将超出容器部分隐藏==*/
position: relative;
width: 100px;
float: left;
margin-right: 10px;
}
/*==隐藏input[type="checkbox"]==*/
#onOff {
border: 0 none !important;
clip: rect(1px,1px,1px,1px);
height: 1px !important;
overflow: hidden !important;
position: absolute !important;
width: 1px !important;
}
/*==checkbox处于默认状态位置（未选中）==*/
#slider {
left: -50px;/*定位在OFF位置*/
position: absolute;
top: 0;
-moz-transition: left 0.25s ease-out;
-webkit-transition: left 0.25s ease-out;
-o-transition: left 0.25s ease-out;
-ms-transition: left 0.25s ease-out;
transition: left 0.25s ease-out;
}
/*==ON、OFF和盖板定位位置==*/
#sliderOn,
#slideBlock,
#sliderOff {
display: block;
font-family: arial, verdana,sans-serif;
font-weight: bold;
height: 30px;
line-height: 30px;
position: absolute;
text-align: center;
top: 0px;
text-shadow: #093B5C 0px -1px 1px;
color: #fff;
}
/*==ON按钮效果==*/
#sliderOn {
background: -webkit-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
background: -moz-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: -o-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: -ms-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: linear-gradient(19% 75% 90deg,#3095C7, #14539C);
width: 54px;
left: 0; /*处于left为0位置处*/
}
/*==覆盖按钮样式==*/
#slideBlock {
background: -webkit-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
background: #fff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(#FFFFFF));
background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
background: -ms-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
background: -o-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
background: linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
border-radius: 3px;
height: 28px;
left: 50px;/*处于left为50px处，遮住ON按钮 */
width: 48px;
border: 1px solid #e5e5e5;
}
/*==OFF按钮风格==*/
#sliderOff {
background: -webkit-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
background: -moz-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: -o-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: -ms-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: linear-gradient(19% 75% 90deg,#3095C7, #14539C);
left: 96px;/*OFF按钮默认位置处*/
width: 54px;
}
#lableTitle{
line-height: 32px;
}
/*==input[type=checkbox]:checked状态时，改变slider左边位置==*/
#sliderLabel input:checked + #slider {
left: 0;
}
具体样式组件，看下图：
具体的样式代码不做过多阐述，这里说两个三个地方：
第一个就是将#slideLabel容器定义宽度，并设置一个overflow:hidden属性
#sliderLabel {
height: 30px;
overflow: hidden;/*==这个值很重要，将超出容器部分隐藏==*/
position: relative;
width: 100px;
}
第二就是隐藏input[type="checkbox"]
#onOff {
border: 0 none !important;
clip: rect(1px,1px,1px,1px);
height: 1px !important;
overflow: hidden !important;
position: absolute !important;
width: 1px !important;
}
第三点，也就是最为重要的一点，“#slider”位置控制，默认是未选择状态，而选中状态，通过input:checked + #slider来控制：
/*==未选中状态位置==*/
#slider {
left: -50px;/*定位在OFF位置*/
position: absolute;
top: 0;
}
/*==选中状态位置==*/
#sliderLabel input:checked + #slider {
left: 0;
}
方法二：伪类元素
方法一采用的是添加标签的方法实现，为了实现一个效果添加一些标签觉得有点浪费，接下来我通过CSS3的伪类元素的方法在制作了一个DEMO：
实现原理
同样的，将默认的input[type="checkbox"]隐藏，通过label的for属性值与input[type="checkbox"]的id属性值来控制选中与否，关键处使用伪类元素来制作ON和OFF的按钮，而盖板效果依旧采用的是一个标签制作，具体参考下面的示意分析图：
HTML Markup
<div class="labelBox"> <input type="checkbox" value="wi-fi" id="wifi" name="wifi" checked="checked" /> <label for="wifi" class="check"></label> <label for="wifi" class="info">Wi-Fi</label> </div>
上面的结构很简单，只要你把上图看懂了的话，没有什么不清楚的。在这里我只想提醒大家“label”中的for属性值一定要和input[type=checkbox]的id属性值相同，否则将没有任何效果。
CSS Code
/*-------------------------*\
* Demo2
\*-------------------------*/
#checked {
font-family: "Lucida Grande", Verdana, Arial, sans-serif, Helvetica;
width: 300px;
position: relative;
margin: 20px auto;
}
/*==Checkbox容器==*/
.labelBox {
margin-bottom: 20px;
background: -webkit-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
background: -moz-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: -ms-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: -o-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: linear-gradient(19% 75% 90deg,#3095C7, #14539C);
border-radius: 4px;
border: 1px solid #555555;
/*容器大小*/
width: 80px;
position: relative;/*这个很重要*/
height: 32px;
}
/*==CSS3的伪类元素制作ON和OFF按钮==*/
.labelBox::before,
.labelBox::after {
content:"ON";/*添加ON标识符*/
padding-left: 9px;
line-height: 32px;
color: #fff;
font-size: 14px;
text-shadow: #093b5c 0 -1px 1px;
}
/*==改变OFF按钮标签符==*/
.labelBox::after {
content:"OFF";
padding-left: 12px;
}
/*==盖板效果==*/
.check {
display: block;
width: 40px;
height: 30px;
border-radius: 3px;
background: #fff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(#FFFFFF));
background: -webkit-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
background: -ms-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
background: -o-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
border: 1px solid #e5e5e5;
/*默认盖板位置*/
position: absolute;
top: 0px;
left: 0px;
}
/*==隐藏input[type=checkbox]==*/
input[type=checkbox] {
border: 0 none !important;
clip: rect(1px,1px,1px,1px);
height: 1px !important;
overflow: hidden !important;
position: absolute !important;
width: 1px !important;
}
/*==制作LabelON动画效果==*/
@-webkit-keyframes labelON {
0% {
top: 0px;
left: 0px;/*确定按钮未选中状态位置*/
}
100% {
top: 0px;
left: 38px;/*确定按钮选中状态位置*/
}
}
@-moz-keyframes labelON {
0% {
top: 0px;
left: 0px;/*确定按钮未选中状态位置*/
}
100% {
top: 0px;
left: 38px;/*确定按钮选中状态位置*/
}
}
@-o-keyframes labelON {
0% {
top: 0px;
left: 0px;/*确定按钮未选中状态位置*/
}
100% {
top: 0px;
left: 38px;/*确定按钮选中状态位置*/
}
}
@-ms-keyframes labelON {
0% {
top: 0px;
left: 0px;/*确定按钮未选中状态位置*/
}
100% {
top: 0px;
left: 38px;/*确定按钮选中状态位置*/
}
}
@keyframes labelON {
0% {
top: 0px;
left: 0px;/*确定按钮未选中状态位置*/
}
100% {
top: 0px;
left: 38px;/*确定按钮选中状态位置*/
}
}
/*==制作labelOFF动画==*/
@-webkit-keyframes labelOFF {
0% {
top: 0px;
left: 38px;/*确定按钮选中状态位置*/
}
100% {
top: 0px;
left: 0px;/*确定按钮未选中状态位置*/
}
}
@-moz-keyframes labelOFF {
0% {
top: 0px;
left: 38px;/*确定按钮选中状态位置*/
}
100% {
top: 0px;
left: 0px;/*确定按钮未选中状态位置*/
}
}
@-o-keyframes labelOFF {
0% {
top: 0px;
left: 38px;/*确定按钮选中状态位置*/
}
100% {
top: 0px;
left: 0px;/*确定按钮未选中状态位置*/
}
}
@-ms-keyframes labelOFF {
0% {
top: 0px;
left: 38px;/*确定按钮选中状态位置*/
}
100% {
top: 0px;
left: 0px;/*确定按钮未选中状态位置*/
}
}
@keyframes labelOFF {
0% {
top: 0px;
left: 38px;/*确定按钮选中状态位置*/
}
100% {
top: 0px;
left: 0px;/*确定按钮未选中状态位置*/
}
}
/*==input[type=checkbox]:checked时盖板位置==*/
input[type=checkbox]:checked + label.check {
top: 0px;
left: 38px;
-webkit-animation: labelON 0.2s ease-in 0s 1;
-moz-animation: labelON 0.2s ease-in 0s 1;
-o-animation: labelON 0.2s ease-in 0s 1;
-ms-animation: labelON 0.2s ease-in 0s 1;
animation: labelON 0.2s ease-in 0s 1;
box-shadow: #244766 -1px 0px 3px;
}
/*==input[type="checkbox"]没选中时盖板位置==*/
input[type=checkbox] + label.check {
top: 0px;
left: 0px;
-webkit-animation: labelOFF 0.2s ease-in 0s 1;
-moz-animation: labelOFF 0.2s ease-in 0s 1;
-o-animation: labelOFF 0.2s ease-in 0s 1;
-ms-animation: labelOFF 0.2s ease-in 0s 1;
animation: labelOFF 0.2s ease-in 0s 1;
box-shadow: #244766 1px 0px 3px;
}
label.info {
position: absolute;
color: #000;
top:0px;
left: 100px;
line-height: 32px;
width: 200px;
}
上面两种方法是模仿iPhone上的checkbox的效果，但我们PC机上的WEB页面checkbox的效果呢？其实用上面的方法也是可以的，下面我们来看一个实例，使用第二种方法来改变checkbox边框的样式。
HTML Markup
<form action="" id="gf-form"> <div class="checkBox"> <input type="checkbox" id="checkbox1" /> <label for="checkbox1"<Unchecked Checkbox</label> </div> <div class="checkBox"> <input type="checkbox" id="checkbox2" checked="checked" /> <label for="checkbox2" >Checked Checkbox</label> </div> <div class="checkBox"> <input type="checkbox" id="checkbox3" disabled="disabled"/> <label for="checkbox3">Disabled Unchecked Checkbox</label> </div> <div class="checkBox"> <input type="checkbox" id="checkbox4" disabled="disabled" checked="checked"/> <label for="checkbox4">Disabled Checkbox</label> </div> </form>
使用这种方法，主要是借助图片来实现，那么我们就需要制作一个sprites图片，下面我在网上随便找了一张图片：
CSS Code
/*-------------------------*\
Demo3
\*-------------------------*/
#gf-form label {
font: normal normal 11px/13px Arial, Sans-serif;
color: #000;
cursor: pointer;
}
#gf-form label,
#gf-form input[type="checkbox"] + label::before {
vertical-align: middle;
}
#gf-form input[type="checkbox"] {
border: 0 none !important;
clip: rect(1px,1px,1px,1px);
height: 1px !important;
overflow: hidden !important;
position: absolute !important;
width: 1px !important;
}
#gf-form input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 13px;
height: 13px;
line-height: 13px;
margin: 0 8px 0 0;
background: url("../images/sprite-radio-checkbox.png") no-repeat 0 0;
vertical-align: middle;
}
/* disabled checkbox*/
#gf-form input[type="checkbox"]:disabled + label{
opacity: .5;
cursor: default; /* or cursor: no-drop */
}
/* hover checkbox (unselected state only) */
#gf-form input[type="checkbox"]:not(:checked):hover + label::before{
background-position: 0 -13px;
}
/* selected checkbox */
#gf-form input[type="checkbox"]:checked + label::before{
background-position: 0 -26px;
}
最终果：
上面用CSS3制作了三个美化表单中的复选框的效果，其实我们也可以使用这样的方法来美化单选按钮的效果，后面将花点时间来试试，大家不仿也试试。
那么今天就说到这了，希望大家喜欢。
如需转载烦请注明出处：W3CPLUS
