iPhone上的UI的确是精致,让人爱不释手。今天用CSS3写了一个Checkbox的效果,采用了两种不同的方法来实现,另外在此基础上写了一个我们常用的checkbox的效果。
众所周知,想要美化表单中的元件,都少不了jQuery的帮忙,有关于这方面的介绍,本站也有过几篇相关的文章,那么有没有办法不使用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