CODEWITHSUNDEEP
cssinputfocusaccessibilityforms
curtybear
curtybear

Reputation: 1538

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

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.

Upvotes: 0

Views: 5448

Answers (1)

Josh
Josh

Reputation: 251

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.

Upvotes: 2

Related Questions