input[type="checkbox"]:checked + label:after{
border: 2px solid red;
background-color: red;
}
<div class="input-field col s12">
<input id="cb1" name="testCheck" type="checkbox" required>
<label for="cb1">Option 1</label>
</div>
<div class="input-field col s12">
<input id="cb2" name="testCheck" type="checkbox" required>
<label for="cb2">Option 2</label>
</div>
<div class="input-field col s12">
<input id="cb3" name="testCheck" type="checkbox" required>
<label for="cb3">Option 3</label>
</div>
I have a list of checkboxes
<div class="input-field col s12">
<input id="cb1" name="testCheck" type="checkbox" required>
<label for="cb1">Option 1</label>
</div>
<div class="input-field col s12">
<input id="cb2" name="testCheck" type="checkbox" required>
<label for="cb2">Option 2</label>
</div>
<div class="input-field col s12">
<input id="cb3" name="testCheck" type="checkbox" required>
<label for="cb3">Option 3</label>
</div>
I use the following CSS to change the color of the check boxes when checked:
input[type="checkbox"]:checked + label:after{
border: 2px solid red;
background-color: red;
}
that does not work. Interestingly, the same CSS:
input[type="radio"]:checked + label:after{
border: 2px solid red;
background-color: red;
}
works for radiobutton list.
I want something like that:
https://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/68b1d126c5b51eb4267aed2e5fd751db1c72aa1b.jpeg