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