纯css实现switch开关

代码比较简单，有需要直接在下边粘贴使用吧~

html:

	<div class="switch-box"><input id="switch" type="checkbox"><label></label></div>

 css：

		.switch-box {position: relative;height: 25px;}.switch-box label {width: 50px;height: 25px;background: #ccc;position: relative;display: inline-block;border-radius: 46px;-webkit-transition: 0.4s;transition: 0.4s;}.switch-box label:after {content: '';position: absolute;width: 21px;height: 25px;border-radius: 100%;left: 0;top: -5px;z-index: 2;background: #fff;box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);-webkit-transition: 0.4s;transition: 0.4s;}.switch-box input {position: absolute;width: 100%;height: 100%;z-index: 5;opacity: 0;}.switch-box label:after {top: 0;width: 23px;height: 23px;margin: 1px 0;}.switch-box input:checked+label {background: #eb8597;}.switch-box input:checked+label:after {left: 30px;}

js:

  $('#switch').change(function (e) {var isChecked = $(this).prop("checked") ? true : false;if (isChecked) {console.log('选中...')} else {console.log('取消选中...')}});