thanks @hube2
the css method I use is widely accepted and used to create this type of effect… In essence: the input is hidden; the label after the input is styled with a :before to create a ‘fake’ checkbox. then using the sibling CSS method, I can style the label differently when the input is checked/selected:
# normal state
label:before {
content: ' ';
width:15px;
height: 15px;
background:red;
display:block;
float:left;
}
# checked state
input[type=checkbox]:checked + label:before {
background:blue;
}
Simple example, but you get the idea. You can see the effect it has in the image in my first post.
With the input being nested inside the label, this method isn’t possible.
According to W3 spec, label+input or input+label or label>input are all fine. But the first 2 options definitely give more control to developers + designers to style the inputs better with CSS methods.
Side note: I’m assuming you nest inside the label so that the label is clickable to select the input, but using for and id on the label + input would achieve the same result.
