xxxxxxxxxx1
<!-- Default checkbox -->2
<div class="form-check">3
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />4
<label class="form-check-label" for="flexCheckDefault">Default checkbox</label>5
</div>6
7
<!-- Checked checkbox -->8
<div class="form-check">9
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked/>10
<label class="form-check-label" for="flexCheckChecked">Checked checkbox</label>11
</div>xxxxxxxxxx1
.form-check-input[type=checkbox]:checked:focus,2
.form-check-input[type="checkbox"]:checked,3
.form-check-input:checked {4
background-color: green;5
border-color: green;6
}7
.form-check-input,8
.form-check-input[type=checkbox]:not(:checked):focus,9
.form-check-input[type="checkbox"]:not(:checked) {10
border-color: red;11
}12
13
.form-check-input:focus:before {14
box-shadow: 0 0 0 13px red;15
}16
.form-check-input:checked:focus:before {17
box-shadow: 0 0 0 13px green;18
}1
1
Console errors: 0