Выделите метку, если установлен флажок

Ответы:

147

Если у вас есть

<div>
  <input type="checkbox" class="check-with-label" id="idinput" />
  <label class="label-for-check" for="idinput">My Label</label>
</div>

ты можешь сделать

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

Смотрите, как это работает . Обратите внимание, что это не будет работать в несовременных браузерах.

Эндрю Маршалл
источник
2
Это не будет работать в IE 6-8, если OP не заботится об IE.
Hussein
25
Я знаю, в своем ответе я заметил, что это будет работать только в современных браузерах.
Эндрю Маршалл
4
@ inf3rno Должен. И соседний селектор, и :checkedселектор соседнего уровня перечислены как поддерживаемые в IE9. Собственные документы Microsoft подтверждают это.
Эндрю Маршалл
3
хорошее решение, но если элемент метки не является следующим предком, вам следует попробовать использовать селектор ~ вместо селектора + 456bereastreet.com/archive/200601/css_3_selectors_explained (последний в таблице)
Карл Адлер,
@abimelex Хотя, в зависимости от вашего HTML, он может соответствовать гораздо большему количеству <label>s, чем хотелось бы.
Эндрю Маршалл
101

Мне нравится предложение Эндрю, и на самом деле правило CSS должно быть следующим:

:checked + label {
   font-weight: bold;
}

Мне нравится полагаться на неявную ассоциацию элементов labelи inputэлемента, поэтому я бы сделал что-то вроде этого:

<label>
   <input type="checkbox"/>
   <span>Bah</span>
</label>

с CSS:

:checked + span {
    font-weight: bold;
}

Пример: http://jsfiddle.net/wrumsby/vyP7c/

Уолтер Рамсби
источник
Есть трюк для изменения цвета фона родительской метки установленного флажка. Сделать переполнение метки: скрытый, затем дать CheckBox очень большой DropShadow ... :checked { box-shadow: 0 0 0 500px orange; }. Вам нужно будет поиграть с z-индексами, чтобы убедиться, что какие-либо одноуровневые элементы не скрыты.
Аарон Чикали
8

Это пример использования :checkedпсевдокласса, чтобы сделать формы более доступными. :checkedПсевдо-класс может быть использован со скрытыми входами и их видимыми метками для создания интерактивных виджетов, таких как галереи изображений. Я создал вырезку для людей, которые хотят протестировать.

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
} 
<input type="checkbox" id="cb_name" name="cb_name"> 
<label for="cb_name">CSS is Awesome</label>
Развернуть фрагмент

Теоччи
источник
-24

Вы не можете сделать это только с помощью CSS. Используя jQuery, вы можете сделать

HTML

<label id="lab">Checkbox</label>
<input id="check" type="checkbox" />

CSS

.highlight{
    background:yellow;
}

jQuery

$('#check').click(function(){
    $('#lab').toggleClass('highlight')
})

Это будет работать во всех браузерах

Проверьте рабочий пример на http://jsfiddle.net/LgADZ/

Хусейн
источник
8
В вопросе действительно говорилось о способе без javascript, и ответ перед тем, как вы очистили, показал способ, который работает только с использованием css
Кевин
2
В принятом решении используется соседний родственный селектор, который на самом деле является функцией CSS 2.1 .
Уолтер Рамсби
JQuery - единственное решение, обеспечивающее кроссбраузерную поддержку.
Hussein
7
Пожалуйста, будь осторожен, Хусейн. Вы можете обеспечить поддержку браузеров, таких как Internet Explorer 6, которые не поддерживают соседний родственный селектор, используя JavaScript . jQuery - это библиотека JavaScript, которая поможет вам в этом; есть и другие библиотеки (или даже чистый JavaScript!), с которыми вы можете это сделать.
Simon Lieschke
Re: мой предыдущий комментарий, я не осознавал, что :checkedпсевдоселектор - это функция CSS3.
Уолтер Рамсби,