-3

First of all, thanks for reading. I'm not english-native speaking, but I will try to express clearly.

I have three ckeckboxes in a form, every checkbox with their label inside a div. The last of them is :required, when not :checked it's possible to change background of div without using JS? Only CSS, and without having to use Pure or Bootstrap.

<form>
  <div class="checkbox">
    <input id="com1" type="checkbox" required>
    <label for="com1">Bla Bla (...)</label>
  </div>  

  <button type="submit">SEND</button>
</form>
knute
  • 1
  • 1

1 Answers1

0

Something like this?

input[type=checkbox]:checked + label {
  background-color: #fff;
  font-style: italic;
} 
input[type=checkbox] + label {
  background-color: red;
  font-style: normal;
}
<form>
  <div class="checkbox">
    <input id="com1" type="checkbox" required>
    <label for="com1">Bla Bla (...)</label>
  </div>  

  <button type="submit">SEND</button>
</form>

Hope it helps.

Serge Inácio
  • 1,366
  • 9
  • 22
  • Looks promising. Trying to make it work when checkbox is not selected, but gets stuck by native browser validation. Thanks. – knute May 18 '18 at 12:12