Есть ли способ изменить цвет метки без использования JavaScript, когда установлен соответствующий флажок?
Есть ли способ изменить цвет метки без использования JavaScript, когда установлен соответствующий флажок?
Ответы:
Если у вас есть
<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;
}
Смотрите, как это работает . Обратите внимание, что это не будет работать в несовременных браузерах.
:checked
селектор соседнего уровня перечислены как поддерживаемые в IE9. Собственные документы Microsoft подтверждают это.
<label>
s, чем хотелось бы.
Мне нравится предложение Эндрю, и на самом деле правило CSS должно быть следующим:
:checked + label {
font-weight: bold;
}
Мне нравится полагаться на неявную ассоциацию элементов label
и input
элемента, поэтому я бы сделал что-то вроде этого:
<label>
<input type="checkbox"/>
<span>Bah</span>
</label>
с CSS:
:checked + span {
font-weight: bold;
}
:checked { box-shadow: 0 0 0 500px orange; }
. Вам нужно будет поиграть с z-индексами, чтобы убедиться, что какие-либо одноуровневые элементы не скрыты.
Это пример использования :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>
Вы не можете сделать это только с помощью CSS. Используя jQuery, вы можете сделать
HTML
<label id="lab">Checkbox</label>
<input id="check" type="checkbox" />
CSS
.highlight{
background:yellow;
}
jQuery
$('#check').click(function(){
$('#lab').toggleClass('highlight')
})
Это будет работать во всех браузерах
:checked
псевдоселектор - это функция CSS3.