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

好吧，您似乎正在尝试理解为什么它不起作用，而不是解决方案。

您的代码无法正常工作，因为标签的操作不会传播到具有自定义点击行为的子元素。所以，当你在里面放一个按钮，或者一个锚等时，它就不会工作了。

至少不是自动的。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在这种情况下，您点击button而不是checkbox。所以我更新了您的HTML，将button替换为span，其工作就像一个魅力。如果您必须保留按钮，则在按钮单击时需要一个小的javascript代码检查复选框。

我更新了你的小提琴。

http://jsfiddle.net/ebilgin/xtayoqmr/6/

HTML

<input type=checkbox id="a">
<label for="a">
    <span>Click me</span>
</label>

CSS

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

Answer 3

演示：http://jsfiddle.net/lotusgodkk/xtayoqmr/4/

CSS：

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

首先，删除display:none的{{1}} css规则。如果输入被隐藏，您如何切换它？

使用现有代码：演示：http://jsfiddle.net/lotusgodkk/xtayoqmr/5/

HTML：

#a

CSS：

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

如果您将属性#a { display:none; } #a ~ label button { background:yellow; } #a:checked ~ label button { background:red; }添加到输入中，则代码将按预期工作。

Answer 4

问题似乎是按钮消耗了click事件，并且没有到达标签，因此未选中复选框选中状态。因此，你可以在没有按钮的情况下工作。

可能的解决方案是使用脚本在点击按钮时触发单击父标签。

如果您仍在寻找css解决方案，那么下面的内容是没有按钮的解决方法。

input.btn {
  display: none;
}
input.btn + label {
  cursor: pointer;
  background: #f4f4f4;
  font-family: Calibri;
  border: 1px ridge #ccc;
  padding: 4px 6px;
  border-radius: 4px;
  box-shadow: 0px 1px 1px;
}
input.btn + label:hover {
  box-shadow: 0px 1px 2px;
  background: #f6f6f6;
}
input.btn + label:active {
  background: #f1f1f1;
  box-shadow: 0px 1px 1px inset;
}
input.btn:checked + label {
  box-shadow: 0px 1px 3px inset;
  background: #f3f3f3;
}

<input type="checkbox" id="a1" class='btn' />
<label for="a1">Click me</label>
<input type="checkbox" id="a2" class='btn' />
<label for="a2">Click me</label>

切换复选框按钮不起作用

4 个答案: