什么是css钩子,要定义

html-css011

什么是css钩子,要定义,第1张

就是id、class呗。

你定义一段样式,只要不是直接作用于某种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>