标签输入或标签选择，如果输入或选择嵌套在 div 中，则焦点不起作用答案

【问题标题】：label input or label select, focus not working if input or select nested in a div标签输入或标签选择，如果输入或选择嵌套在 div 中，则焦点不起作用
【发布时间】：2016-07-11 17:28:42
【问题描述】：

尝试将焦点放在样式选择和嵌套在 div 中的其他输入：

<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>

单击标签不会将焦点放在输入或嵌套 div 的选择上。

【问题讨论】：

你有什么问题？
试图将焦点放在样式选择和嵌套在 div 中的其他输入
标签用于不关注嵌套在 div 中的输入/选择
你没有样式，所以很难测试。我made a CodePen 和<label>s 做了他们应该做的事——点击它们会将焦点放在相关的字段上。但是，您的问题仍然不清楚。

标签： css input focus accessibility forms

【解决方案1】：

您的代码对我来说运行良好，我只需要修复一些错误：

<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>

您缺少标签“for”属性上的尾随引号以及第二个输入的结束 <label> 元素上的尾随大于 (>) 字符。

【讨论】：