У меня такая форма:

<form>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
      One.
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
    <label class="form-check-label" for="defaultCheck2">
      Two.
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
    <label class="form-check-label" for="defaultCheck3">
      Three.
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck4">
    <label class="form-check-label" for="defaultCheck4">
      Four.
    </label>
  </div>
</form>

Я понимаю, что могу использовать следующее для стилизации отмеченных флажков:

.form-check-input:checked + label {
  color: blue
}

У меня есть форма с различным количеством флажков. Есть ли способ применить стиль только в том случае, если все флажки в форме отмечены?

Я хотел бы сделать это только в CSS.

0
user3574603 26 Ноя 2018 в 17:51

1 ответ

Лучший ответ

Если все ваши флажки установлены на required, вы можете использовать псевдокласс :valid в форме, чтобы выбрать его или любого из его потомков.

Иначе, как сказал @Pete, в настоящее время нет возможности сделать это.

2
MatTheCat 26 Ноя 2018 в 15:01