CSS: есть ли способ обнаружить использование только CSS, когда все флажки в форме отмечены?

Question

У меня есть следующая форма:

<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.

Answer 1

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