你定义一段样式,只要不是直接作用于某种html标签全局的样式,就得在html元素上加id或class才能调用撒。
<p class="red">这个red就是钩子</p>
.red{color:red}
这个单纯使用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>