Стиль <label>основан на состоянии <input>

Question

Возможно ли с помощью только CSS стилизовать метку HTML в зависимости от состояния ее ввода?

В моем случае я хочу задать стиль <input type="checkbox"> в зависимости от того, установлен ли он.

Я попытался поместить метку во вход, но Firefox и Chrome (по крайней мере), кажется, анализируют их как братьев и сестер, даже если они явно вложены во входной источник. И я не знаю, как написать правило CSS, которое может быть косвенным через атрибут for =.

Нужно ли мне вытащить Javascript на этом?

Answer 1

Они не должны быть вложенными, для этого используется атрибут "for" в элементе .

В современных браузерах (поддерживающих CSS 2.1) вы можете использовать селектор брата, например

input + label {
  /* rules */
}

Вы должны иметь разметку в строгих отношениях с братом, например:

<input name="cb" id="cb" type="checkbox"><label for="cb">Checkbox</label>

Answer 2

Использование селектора смежных / родственных элементов плюс селектора атрибутов заставит его работать:

<form>
    <style>
    INPUT[checked=checked] + LABEL {
        color: #f00;    
    }
    </style>
    <div>
        <input type="checkbox" id="chk1" />
        <label for="chk1">Label #1</label>
    </div>
    <div>
        <input type="checkbox" id="chk2" checked="checked" />
        <label for="chk2">Label #2</label>
    </div>
</form>

Answer 3

Чтобы это сработало, вам нужно поставить label после input, это относится к вводам текстового типа, поэтому for checkbox you can skip this, если только вы не хотите поставить метку перед флажком.

Чтобы сохранить показ для label перед input, вам нужно использовать Flexbox и обратный порядок элементов, например, вот так.

.form-group {
  display: flex;
  flex-direction: column-reverse;
}

display: flex; с flex-direction: column-reverse; изменяет порядок содержимого div.

Теперь все, что вам нужно сделать, это использовать, чтобы повлиять на ваш стиль label.

input:checked + label {
  color: #000;
}

И HTML для полноты.

<div class="form-group">
        <input type="checkbox" name="rememberPwd" id="rememberPwd" class="form-input" required/>
        <label for="rememberPwd">Remember?</label>
</div>