标签选择器仅指复选框

Question

我想知道是否有一个CSS选择器来选择引用输入类型label的任何checkbox。

<label for="checkbox_1">First checkbox</label>
<input type="checkbox" name="checkbox_1" value="1">

所以很容易做到：

label[for='checkbox_1'] { /* styles */ }

但是我必须为每个引用复选框的标签重复此操作。 我想做点什么：

label[type='checkbox'] { /* styles */ }

有什么想法吗？

Answer 1

您可以使用选择所有LABELS的选择器，其type属性以单词“checkbox”开头：

label[type^='checkbox']

有关属性选择器的更多信息，请访问：http://www.w3.org/TR/css3-selectors/#attribute-substrings

Answer 2

据我所知，这对于纯CSS来说目前是不可能的。但是，您确实有几种解决方法可供选择：

[attribute ^ ='value']选择器
如果您的标签在与复选框关联时实际上以相同的标识符/单词开头，这将起作用，类似于您提供的代码示例。

实施例：

HTML

<label for='chckbx'>Foobar</label>
<input type='checkbox' name='chckbx_1' value='1' />

CSS

label[for^='chckbx']{/* styles */}

以某种方式编写HTML
如果您已将<label>及其关联的<input />放在自己的容器中，或者您可以修改HTML，那么这将有效。诀窍是通过CSS选择checkbox元素的容器，然后设置它的子<label>的样式。

实施例：

HTML

<div class='checkboxContainer'>
    <label for='foo'>Foobar</label>
    <input type='checkbox' name='foo' value='1' />
</div>

CSS

.checkboxContainer > label{/* styles */} 

使用JS
如果你想要我，我可以用JavaScript（/ jQuery）编写一个简单的代码示例。