按输入类型选择标签答案

【问题标题】：Select Label by Input type按输入类型选择标签
【发布时间】：2012-10-24 15:59:03
【问题描述】：

有没有办法通过输入类型排除或选择标签，类似于输入字段？

label:not([type=checkbox])
label[type=checkbox]

【问题讨论】：

你的问题究竟是什么？你想知道其他输入类型是什么吗……看不清楚……改写……
第二个肯定有效。 [attribute=value] css 选择器适用于任何东西，而不仅仅是输入。（你可以获得类名，如果它被禁用等）虽然这在某些旧版本的 IE 中可能不起作用。我之前没有见过 :not 选择器，所以我无法评论它。
@Vinay 的问题是，如何在 CSS 中选择或排除输入 fieldtype=checkbox 的标签？
哦，等等，您要根据标签的for 属性来定位标签吗？我想我误解了你原来的问题。
@TheWaxMann 是的，这就是问题 :)

【解决方案1】：

如果你给你的复选框指定了所有以相同的东西开头的特定 id，你可以执行以下操作：

HTML

<input type="checkbox" id="chkTerms" />
<label for="chkTerms">Read terms & conditions</label>

CSS

label[for*="chk"], label[htmlfor*="chk"]
{
css here
}

可能只有现代浏览器。编辑：我刚刚尝试了一个小提琴：link，它适用于 chrome 和 IE 8 & 9，但不适用于 7。我没有在 FF 中尝试过。

EDIT2：只是为了解释这里发生的事情，方括号会查找所需的属性。 asterix 将 equals 的行为从普通的 equals 更改为包含 - 只要 for 属性包含“chk”，它将应用该样式。您可以将 * 替换为 ^，它会将其更改为以开头而不是包含。

EDIT3：BoltClock 在评论中提供了针对 IE7 的修复，我已经更新了答案以包含它。

【讨论】：

【解决方案2】：

input[type=checkbox] + label { /*label style here*/ } 怎么样？如果文本就在输入元素之后，它可能会起作用。我没有测试过。

【讨论】：

【解决方案3】：

您可以将您的复选框与基本数据属性参考一起使用..

<input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />
<label for="checkbox-0">Whatever</label>

如果你没想到……请告诉我们……

【讨论】：