label input or label select, focus not working if input or select nested in a div

Question

Trying to give focus to a styled select and other inputs nested within divs:

<label for="focusedSelect">I want to Focus on You</label>
<div class="styled-select">
    <select id="focusedSelect">
        <option value="1">Won</option>
        <option value="2">Too</option>
    </select>
</div>

<label for="focusedInput>Let me Focus on You Too</label>
<div class="styled-inputs">
    <input id="focusedInput" type="text"/>
</div>

Clicking the label doesn't give focus to input or select of nested div.

Trying to give focus to a styled select and other inputs nested within divs — curtybear
– curtybear, Commented Jul 11, 2016 at 23:37
label for not focusing on input / select nested within a div — curtybear
– curtybear, Commented Jul 11, 2016 at 23:38
You have no styles, so it is hard to test. I made a CodePen and the <label>s do what they should do — clicking them puts focus on the associated field. Your question is still not clear, however. — aardrian
– aardrian, Commented Jul 11, 2016 at 23:47

Josh · Accepted Answer · 2016-07-19 22:00:49Z

2

Your code is working fine for me, I just had to fix a few mistakes:

<label for="focusedSelect">I want to Focus on You</label>
<div class=" styled-select">
  <select id="focusedSelect">
    <option value="1 ">Won</option>
    <option value="2 ">Too</option>
  </select>
</div>

<label for="focusedInput">Let me Focus on You Too</label>
<div class="styled-inputs">
  <input id="focusedInput" type="text" />
</div>

You were missing the trailing quote on both label "for" attributes as well as the trailing greater than (>) character on the closing <label> element for the second input.

answered Jul 19, 2016 at 22:00

Josh

2511 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

label input or label select, focus not working if input or select nested in a div

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related