It seems like I'm having trouble making this work, and it appears to not be possible. That's why I'm reaching out for help...
Here is the CSS that is being used:
label.btn {
cursor:pointer;
display:inline-block;
}
label.btn>input[type=checkbox] {
display:none;
}
label.btn>input[type=checkbox]:checked~b {
background:red;
}
/* Just for testing purposes */
#divtest {
margin-top:1500px
}
The following HTML code checks the input and applies styling to the <b> tag:
<a href="#divtest" id="anchor">
<label class="btn">
<input type="checkbox"/><b>Click should scroll to '#divetest' element and check input for styling!</b>
</label>
</a>
See a demo of the styling here
If I add the 'for' attribute to the label to target the anchor tag, the default browser scrolling works, but then no more styling is applied:
<label class="btn" for="anchor">
Check out the demo with the anchor tag here
Now, the question at hand is:
Is it possible to make both of these behaviors work together using only CSS?