标签：set height add radius size 地址 webkit margin pre
<!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>
标签：set height add radius size 地址 webkit margin pre
原文地址：http://www.cnblogs.com/qiuchuanji/p/7662399.html
