CODEWITHSUNDEEP
htmlcss
IEatBagels
IEatBagels

Reputation: 843

Link within Label doesn't set focus on attributed input

I'm working on a One Pager website where I have a navigation menu. I'd want to have radio input associated to the clicked a, in order to apply some CSS to the active radio.

As you will see, the CSS is applied when I click on the radio, but not when I click on the link. I know I could do this using JavaScript, but I am trying to avoid growing my code base.

The second section of the snippet is what I'd want to achieve, but with an a tag in the label. The radio will be hidden, so clicking on the radio isn't an acceptable answer. How can I make the a tag and the input tag 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>

Upvotes: 0

Views: 146

Answers (2)

Escher
Escher

Reputation: 5795

Here's a working example of the label syntax: https://jsfiddle.net/93c3sscs/

If you're testing on IE11 or your customers use IE (not sure about Edge and other IE versions), you can't rely on labels to activate inputs. IE does not apply clickable functionality to <label><input></label>, and Microsoft put out 2 updates in the second half of 2015 that completely broke my app because of this by positioning the clickable area 5px above my widget sprites.

Upvotes: 0

Ashish Patel
Ashish Patel

Reputation: 772

Right solution is here , try this.

<script type="text/javascript">
$(document).ready(function(){
    $('[name=title_format]').click(function()  {
        $('[name=doc-title]').val('Title changed to '+$(this).val());
    });
});
</script>

<style>
input[type=radio]:checked + label {
    color:red;
    background-color:green;
}
.working {
    width:0;
}
</style>

<div>
    <h2>Not working with a tag</h2>
    <div>
        <a href="#">
        <input type="radio" name="title_format" class="title-format" id="title-format-0" value="0" checked="checked">               <label for="title-format-0">Input 1</label>
        </a>
    </div>
    <div>
         <a href="#">
        <input type="radio" name="title_format" class="title-format" id="title-format-1" value="1"> 
        <label for="title-format-1">Input 2</label>
        </a>
    </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>

Upvotes: 1

Related Questions