Question

我输入有问题：Chrome 31.x上已选中+标签。

以下是代码：demo

我的应用程序按钮就像第一个演示程序一样，它工作了很长时间。昨天，我播种了一个功能停止工作，我不知道为什么。今天我正在网上搜索，几乎找不到任何东西。我找到了类似功能的旧演示，并添加到这个内部标签。它停止了工作。

任何人都知道发生了什么或如何解决这个问题？我想尽可能少地做出改变。现在有两个选项：JS或删除按钮和restyle“按钮”。

PS。我知道，标签中的按钮不是语义，但它不是我的代码：P

Answer 1

它不起作用，因为Chrome可能会为父标签添加某种“stopPropagation（）”。

Hacky解决方案：

$(function () {
  $('body').on('click', 'label button', function (e) {

    $(this).closest('label').trigger('click');

    e.stopPropagation();
    e.preventDefault();
  });
});

Answer 2

没有Javascript解决方案

更新：解决点击标签以获取已检查状态问题

这也有一个纯CSS解决方案（至少在某些条件下）。 See this example使用此css：

input + label {position: relative;}
input + label button {
  position: relative;
  z-index: -1;
}

这会将label覆盖在button元素上，从而允许label获取点击而不是button。这样做的两个后果是：

如果实际的button也需要注册点击，那么像tdroL的回答这样的js解决方案是我认为唯一可行的方法。
点击button不会激活浏览器的“按下按钮”外观，因为button并未真正被按下（label是）。如果有人想要，那么使用像input + label:active button这样的选择器需要对按钮进行额外的样式更改以进行按下的外观。

解决颜色问题（这不是主要问题）

我原本以为问题是关于解决按钮的颜色值，并给出了以下答案（这仍然有用）。我认为button的{{1}}元素的默认值不是color，因为大多数文本都是（可能是浏览器特定的）。经过检查，Firefox和Chrome的直接按钮元素都显示inherit作为buttontext属性的值，表明浏览器正在控制按钮颜色。因此，需要更明确的css来设置按钮的color，因为它不会color inherit来自嵌套的color元素（其中是你的例子取决于）。 So this css works）：

label

当然，如果你还需要第二个工作，css would be this：

input:checked + label button {color:red}

Chrome 31.x支持输入：选中+标签？

2 个答案:

没有Javascript解决方案