今天碰到Checkbox Hack,请问什么是 CSS Checkbox Hack?
网友回复
CSS Checkbox Hack 允许你通过复选框(Checkbox 或单选按钮radio buttons)是否选中来控制某些特定的样式。这里运用的是:checked 伪类选择器,其意思就是“如果选中了表单(复选框、单选按钮),则应用相关样式规则” 我们通常隐藏表单控件,然后结合<lable>标签来控制复选框或单选框的选择,制作一些特殊的效果,因此用户无法感知复选框表单的存在。
示例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .control-me { /* 初始状态 */ color: black; } #toggle:checked ~ .control-me { /* 点击了checkbox后状态,无需js*/ color: red; font-weight: bold; } </style> </head> <body> <label for="toggle">点我试试</label> <input type="checkbox" id="toggle"> <div class="control-me"> 我是被控制的对象 </div> </body> </html>
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .control-me::after { content: "