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

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

<!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,最后你就知道问题出在哪了~

展开阅读全文
©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读