Селектор для меток, которые относятся только к флажку

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

Вы можете использовать селектор, который выбирает все ЭТИКЕТКИ с атрибутом типа, начиная со слова «флажок»:

label[type^='checkbox'] 

Больше информации о селекторы атрибутов здесь: http://www.w3.org/TR/css3-selectors/#attribute-substrings

Answer 2

это в настоящее время не представляется возможным с насколько я знаю, чистый CSS. У вас есть несколько вариантов для обходных, хотя:

код [атрибут^= «значение»] Селектор
Это будет работать, если ваши этикетки на самом деле начать с тем же идентификатором/слово, когда связанные с флажками, аналогично на приведенный вами пример кода.

Пример:

HTML

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

CSS

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

---

Написание HTML определенным образом
Это будет работать, если у вас уже есть ваши <label> s и связанные с ними <input /> s в собственном контейнере, или если вы можете изменить свой HTML таким образом. Хитрость заключается в том, чтобы выбрать контейнер элемента флажка через CSS, а затем создать его дочерний элемент <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), если хотите.