I am currently configuring "card" style checkboxes where there are three hidden checkboxes (opacity: 0) with corresponding labels displayed as boxes with backgrounds.
Clicking on the label selects the checkbox and changes its label to a blue background. Everything is functioning properly, except I noticed that I am unable to tab through the labels and select their respective checkboxes when the labels themselves are focused by pressing the space bar.
The checkboxes can be tabbed to and selected using the spacebar, but not when the label is in focus... it's like an inconsistency between the labels.
Note: Adding a tabindex="0" to the labels enables them to be focused on and highlighted.
Is there a way to achieve this without JavaScript? I am designing the UI for an Angular application, although my knowledge of Angular is limited.
I understand that different browsers may have inconsistencies in tabbing and input selection (I am working in Chrome), so I intend to consider that as well. Thank you.
/* Unchecked labels are red */
label {
display: inline-block;
width: 100px;
height: 50px;
background-color: tomato;
}
/* Invisible checkboxes */
input[type="checkbox"] {
opacity: 0;
}
/* If checkbox is checked, blue background */
input[type="checkbox"]:checked + label {
background-color: blue;
}<input type="checkbox" id="1">
<label for="1" tabindex="0"></label>
<input type="checkbox" id="2">
<label for="2" tabindex="0"></label>
<input type="checkbox" id="3">
<label for="3" tabindex="0"></label>