提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

css：使用label控制checkbox不生效的原因

控制CSS 原因 checkbox 生效 Label 使用
2023-09-27 14:27:10 时间

今天有个简单的需求，就是实现表单底部的勾选知情同意书的效果，如图：
在这里插入图片描述
我想着玩意做了百八十遍岂不是手到擒来，于是我写下了这样的代码：

<!DOCTYPE html>
<html>

<head>
  <title>测试</title>
  <style type="text/css">

  label {
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #666;
  }

  input {
    display: none;
  }

  input:checked + label {
    border: 1px solid #f00;
  }
  </style>
</head>

<body>
  <div>
    <label for="agree"></label>
    <input type="checkbox" name="agree" id="agree">
  </div>
</body>

</html>

这，我点击 label 怎么没有改变 border 为 #f00，我开始慌了。。

解决

最后发现，input:checked + label 这里的 + 是代表兄弟元素，兄弟元素一定是在该元素的下面，也就是我换一下 input 和 label 标签的位置就好了

<body>
  <div>
    <input type="checkbox" name="agree" id="agree">
    <label for="agree"></label>
  </div>
</body>

这件事告诉我一个道理，遇到 bug 不要慌，一步一步缩小 bug 范围，实在不行写一个小 demo，最后你就知道问题出在哪了~

相关文章