代码结果展示
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<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="example0" type="checkbox" checked>
<label for="example0">Check</label>
</div>
</body>
</html>