<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义input[type="checkbox"]</title>
<style type="text/css">
*{padding: 0px; margin: 0px;}
.mycheckbox {
position: relative;
top: 100px;
left: 100px;
}
.mycheckbox input[type="checkbox"] {
display: none;
}
.mycheckbox label {
display: inline-block;
width: 100px;
height: 100px;
background: black;
}
.mycheckbox input[type="checkbox"]:checked+label {
background: blue;
}
.mycheckbox input[type="checkbox"]:checked+label:before{
display: inline-block;
position: absolute;
top: 20px;
left: 14px;
content: "";
height: 30px;
width: 60px;
border-left: 8px solid #FFF;
border-bottom: 8px solid #FFF;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<!--
这里要注意的是，label的for必须指定input[type="text"]的id属性，不然会没有效果
自定义radio跟自定义checkbox一样，最终是定义label的样式。这个全凭大家的想象来自定义样式；
-->
<div class="mycheckbox">
<input type="checkbox" id="checkbox11" />
<label for="checkbox11"></label>
</div>
</body>
</html>
还有一个要注意的就是label在input的下面，不然会出现点击了没效果；最终样式如下图：
选中
未选中：