纯CSS+HTML自定义checkbox效果[转]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIVCSS5 CSS?τ???? ?П?}</title>
<style>
.wrap {
500px;
background-color: #EEE;
border: 2px solid #DEF;
}
input[type='checkbox'] {
display: none;
}
label {
display: inline-block;
60px;
height: 60px;
position: relative;
margin: 20px 120px 0 20px;
background: url(../blank.png);
background-position: 0 0px;
-webkit-transition: background 0.5s linear;
}
input[type='checkbox']:checked+label {
background-position: 0 -60px;
}
label::after {
content: attr(data-name);
/* 利用attr可以减少css代码量*/
display: inline-block;
position: relative;
120px;
height: 60px;
left: 100%;
vertical-align: middle;
margin: 10px;
/* line-height: 60px; */
}
</style>
</head>
<body>
<div class="divcss5">
<div class="wrap">
<input type="checkbox" ></label>
</div>
</div>
</body>
</html>