html - 切换复选框按钮不起作用

Question

我只是在定制 checkbox按钮并以这个结束， FIDDLE HERE 。

HTML:

 <input type=checkbox id="a">
  <label for="a">
    <button>click me</button>
  </label>

CSS:

#a {
    display:none;
}
#a ~ label button {
    background:yellow;
}
#a:checked ~ label button {
    background:red;
}

但这行不通，为什么？我想知道为什么它不起作用。

如果我删除 button并检查样式如下:

#a {
    display:none;
}
#a ~ label {
    background:yellow;
}
#a:checked ~ label {
    background:red;
}

它工作正常。 谁能回答为什么我的初始代码不起作用。

Answer 1

好吧，您似乎想了解为什么它不起作用，而不是解决方案是什么。

您的代码不起作用，因为标签的操作不会传播到具有自定义点击行为的子元素。因此，当您在其中放置一个按钮或 anchor 等时，它不会起作用。

至少不会自动。

但是如果你想让按钮改变你的复选框值，你可以给它添加一个点击事件，然后将该点击传播到复选框:

document.querySelector("button").addEventListener("click", function(e) {
  e.target.parentNode.click(); // propagate the click event to the label
});

#a {
    display:none
}
#a ~ label button {
    background:yellow
}
#a:checked ~ label button {
    background:red
}

<input type=checkbox id="a">
<label for="a">
    <button>click me</button>
</label>

---

如果你需要一个纯 CSS 的解决方案，你可以通过禁用按钮的所有鼠标事件来做一些 hack，在你的 css 中使用 pointer-events: none:

#a {
    display:none
}
#a ~ label button {
    background:yellow;
    pointer-events: none
}
#a:checked ~ label button {
    background:red
}

<input type=checkbox id="a">
<label for="a">
    <button>click me</button>
</label>