这个得用Html做的
<form action="" method="get">
您喜欢的水果？<br />
<label><input name="Fruit" type="checkbox" value="0" />苹果 </label>
<label><input name="Fruit" type="checkbox" value="1" />桃子 </label>
<label><input name="Fruit" type="checkbox" value="2" />香蕉 </label>
<label><input name="Fruit" type="checkbox" value="3" />梨 </label>
</form>
这个单纯使用css是无法实现的。
一般的话，我们实现这个效果是通过将checkbox的visibility设置为hidden，然后为checkbox添加label，对label进行样式设置，图片替换来实现你需要的效果。
建议将label里面内容替换为图片提升兼容性。
<!DOCTYPE HTML><html>
<head>
<style type="text/css">
#checkbox-1 {
display: none
visibility:hiiden
}
#checkbox-1 + label {
color: blue
}
#checkbox-1:checked + label {
color: red
}
</style>
</head>
<body>
<p><input type="checkbox" id="checkbox-1"><label for="checkbox-1">✔☑</label></p>
</body>
</html>
