My project involves creating a One Pager website with a navigation menu. I am looking to implement radio inputs that are associated with the clicked link (a) so that I can apply CSS styles to the active radio button.
Currently, the CSS is applied when the radio button is clicked, but not when the link is clicked. While I am aware that JavaScript could solve this issue, I am trying to keep my code base concise.
In the second part of the snippet, my goal is to have the a tag inside the label, and both the a tag and the input tag should trigger activation. The radio buttons will be hidden, making clicking on them unacceptable. How can both elements be made to activate?
input[type=radio]:checked + label {
color:red;
background-color:green;
}
.working {
visibility: hidden;
width:0;
}<html>
<body>
<div>
<h2>Not working with a tag</h2>
<div>
<input id="a" type="radio" name="menu1" value="a"/>
<label for="a"><a href="#">Input 1</a></label>
</div>
<div>
<input id="b" type="radio" name="menu1" value="b"/>
<label for="b"><a href="#">Input 2</a></label>
</div>
</div>
<div>
<h2>Expected result (without a, it doesn't work)</h2>
<div>
<input class="working" id="c" type="radio" name="menu2" value="a"/>
<label for="c">Input 1</label>
</div>
<div>
<input class="working" id="d" type="radio" name="menu2" value="b"/>
<label for="d">Input 2</label>
</div>
</div>
</body>
</html>