<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 为移动设备添加1 viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-title" content="">
<meta name="format-detection" content="telephone=no">
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<style>
.selected_remind_input input[type="checkbox"] {
-webkit-appearance: none;
}
.selected_remind_input input[type="checkbox"]:checked+label,
.selected_remind_input input[type="checkbox"]:not(:checked)+label {
background-color: #e0e0e0;
border-radius: 24px;
cursor: pointer;
display: inline-block;
height: 20px;
position: relative;
text-indent: -9999px;
width: 40px;
}
.selected_remind_input input[type="checkbox"]:checked+label:after,
.selected_remind_input input[type="checkbox"]:not(:checked)+label:after {
background-color: #fff;
border-radius: 20px;
content: " ";
height: 15px;
left: 2px;
position: absolute;
top: 2px;
width: 15px;
}
.selected_remind_input input[type="checkbox"]:checked+label {
background-color: #4d87ea;
}
.selected_remind_input input[type="checkbox"]:checked+label:after {
left: 22px;
}
.selected_remind_input input[type="checkbox"]:checked+label,
.selected_remind_input input[type="checkbox"]:not(:checked)+label {
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.selected_remind_input input[type="checkbox"]:checked+label:after,
.selected_remind_input input[type="checkbox"]:not(:checked)+label:after {
-webkit-transition: left 0.3s;
transition: left 0.3s;
}
</style>
</head>
<body>
<div class="selected_remind_input ">
<input id="example2" type="checkbox" checked>
<label for="example2">Check</label>
</div>
<div class="selected_remind_input ">
<input id="example1" type="checkbox" checked>
<label for="example1">Check</label>
</div>
<div class="selected_remind_input ">
<input id="example0" type="checkbox" checked>
<label for="example0">Check</label>
</div>
</body>
</html>
