今天学东西看到一个很实用的例子,记下来,方便以后使用!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
list-style-type:none;
padding:0;
}
label span{
width:34px;
height:34px;
display:inline-block;
background:url(input.png) 0 0 no-repeat;
}
label input{
display:none;
}
label input:checked + span{
background:url(input.png) -48px 0 no-repeat;
}
</style>
</head>
<body>
<label for="i1">
<input type="checkbox" id="i1">
<span></span>
</label>
</body>
</html>
图片:
实现效果:
未选中:
选中:
学习学习,不断积累,不断进步!