纯css实现checkbox样式改变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>checkbox</title>
<style>
.checkbox input {
display: none;
}
.checkbox input+label {
background: url(./checkbox1.png) left center no-repeat;
background-size: 20px 20px;
padding-left: 20px;
}
.checkbox input:checked+label {
background-image: url(./checkbox2.png);
}
</style>
</head>
<body>
<div class="checkbox">
<input type="checkbox" checked id="music" />
<label for="music">音乐</label>
<input type="checkbox" id="sport" />
<label for="sport">运动</label>
</div>
</body>
</html>
相关推荐
nicepainkiller 2020-05-05
资源分享 2020-01-21
81463166 2020-01-04
风飞飘扬 2014-06-24
88580793 2018-01-03
攻城师 2019-06-29
有心就有方向 2018-01-03
jianqi 2019-06-27
云端漂移 2019-06-27
yezi 2019-06-26
luyou0 2013-12-24
昔人已老 2013-11-30
Haoroid 2013-05-23
momode 2013-04-29
半纸药笺 2019-06-20
屋顶小黑猫 2013-03-21
ruizhenggang 2012-03-31
hepandefeng 2018-08-15