一、
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复选框</title>
<style>
#container {margin: 20px auto;}
#container span {position: relative;}
#container .input_check {position: absolute;visibility: hidden;}
#container .input_check+label {display: inline-block;width: 16px;height: 16px;border: 1px solid #fd8845;}
#container .input_check:checked+label:after {content: "";position: absolute;left: 2px;bottom: 12px;width: 9px;height: 4px;
border: 2px solid #fd8845;border-top-color: transparent;border-right-color: transparent;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-45deg);}
</style>
</head>
<body>
<div id="container">
<span><input type="checkbox"class="input_check" id="check3"><label for="check3"></label></span>
<span><input type="checkbox"class="input_check" id="check4"><label for="check4"></label></span>
</div>
</body>
</html>
二、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>改变复选框的样式</title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
name="viewport" />
</head>
<style>
.checkbox {position: relative;height: 30px;}
.checkbox input[type='checkbox'] {position: absolute;left: 0;top: 0;width: 20px;height: 20px;opacity: 0;}
.checkbox label {position: absolute;left: 30px; top: 0;height: 20px;line-height: 20px;}
.checkbox label:before {content: '';position: absolute;left: -30px;top: 0;width: 20px;height: 20px;border: 1px solid #ddd;border-radius: 50%;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;}
.checkbox label:after {content: '';position: absolute;left: -22px;top: 3px;width: 6px;height: 12px;border: 0;border-right: 1px solid #fff;border-bottom: 1px solid #fff;background: #fff;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;}
.checkbox input[type='checkbox']:checked + label:before {background: #4cd764;border-color: #4cd764;}
.checkbox input[type='checkbox']:checked + label:after {background: #4cd764;}
</style>
<body>
<div class='checkbox'>
<input type='checkbox' id='checkbox1' name='checkboox[]'>
<label for='checkbox1'>
Chinese
</label>
</div>
<div class='checkbox'>
<input type='checkbox' id='checkbox2' name='checkboox[]'>
<label for='checkbox2'>
Math
</label>
</div>
<div class='checkbox'>
<input type='checkbox' id='checkbox3' name='checkboox[]' checked>
<label for='checkbox3'>
English
</label>
</div>
</body>
</html>
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
