<!DOCTYPE html>
<html>
<head>
???<meta charset="utf-8">
???<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
???<meta name="viewport"
?????????content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
???<title>新增收货地址</title>
???<link rel="stylesheet" type="text/css" href="css/reset.css"/>（清楚元素默认样式）
???<script src="js/flexible.debug.js"></script>(阿里的适配)
???<script src="js/flexible_css.debug.js"></script>
???<style>
???????.add_list {
???????????border-top: 0.26667rem solid #f5f5f5;
???????????margin-bottom: 2.45333rem; }
???????.add_list .add_item {
???????????width: 100%;
???????????height: 1.28rem;
???????????line-height: 1.28rem;
???????????font-size: 0.37333rem;
???????????color: #4c4c4c;
???????????padding: 0 0.32rem;
???????????background: #ffffff;
???????????border-bottom: 1px solid #ededed;
???????????position: relative; }
???????.add_list .chooseBtn {
???????????display: none; }
???????.add_list .choose-label {
???????????width: 1.33333rem;
???????????height: 0.74667rem;
???????????display: inline-block;
???????????border-radius: 20px;
???????????position: relative;
???????????background-color: #cccccc;
???????????overflow: hidden;
???????????margin-top: 0.26667rem; }
???????.add_list .choose-label:before {
???????????content: ‘‘;
???????????position: absolute;
???????????left: 0.05333rem;
???????????width: 0.69333rem;
???????????height: 0.69333rem;
???????????top: 0.02667rem;
???????????display: inline-block;
???????????border-radius: 0.53333rem;
???????????background-color: #fff;
???????????z-index: 20;
???????????-webkit-transition: all 0.5s;
???????????transition: all 0.5s; }
???????.add_list .chooseBtn:checked + label.choose-label:before {
???????????left: 0.61333rem; }
???????.add_list .chooseBtn:checked + label.choose-label {
???????????background-color: #22d078; }
???</style>
</head>
<body>
???<ul class="add_list">
???????<li class="add_item">
???????????<span class="fl">设为默认:</span>
???????????????<span class="fr">
???????????????????<input type="checkbox" name="sex" id="male" class="chooseBtn" />
???????????????????<label for="male" class="choose-label"></label>
???????????????</span>
???????</li>
???</ul>
</body>
</html>
CSS实现滑块
原文地址：http://www.cnblogs.com/qiuchuanji/p/7662399.html