关于checked按钮自定义样式—使用label
一般有两种方法
1.设置背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.shopL label input {
background: url(../img/shop_hei.png)no-repeat;
-webkit-appearance: none;
/* -webkit-appearance 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中,-webkit-appearance是用来改变按钮和其他控件的外观,使其外观类似于原生控件。*/
}
.shopL label input:checked {
background: url(img/07.jpg)no-repeat;
width: 50px;
height: 50px;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="shopL">
<label><input type="checkbox" name="">点我</label>
</div>
</body>
</html>
2.`
<head>
<meta cha