CSS3制作iPhone的Checkbox

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

返回顶部