直接上css代码
.checkbox{
width: 18px;
height: 18px;
opacity: 0;
}
.checkboxdiy {
width: 18px;
margin: 20px 100px;
position: relative;
}
.checkboxdiy label {
cursor: pointer;
position: absolute;
width: 17px;
height: 17px;
top: 0;
left: 0;
border:1px solid #ccc;
}
.checkboxdiy label:after {
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 2px;
left: 4px;
border: 2px solid #333;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.checkboxdiy label:hover::after {
opacity: 0;
}
.checkboxdiy input[type=checkbox]:checked + label:after {
opacity: 1;
}
下面是html标签
<div class="checkboxdiy">
<input type="checkbox" value="1" id="checkboxdiyInput" class="checkbox" name="" />
<label for="checkboxdiyInput"></label>
</div>
