无法聚焦（点击进入）html 输入元素答案

【问题标题】：Cannot focus (click into) html input elements无法聚焦（点击进入）html 输入元素
【发布时间】：2013-08-08 19:38:44
【问题描述】：

TL;DR 点击链接

我的输入元素正在罢工并拒绝工作。我已将其剥离以隔离变量，并且我发现了一些解决问题的方法，但我知道这里还有其他事情发生...

根据 SO 指南的 HTML 和 CSS：

<div class="fl half">
    <div class="input-wrap">
        <input />
    </div>
    <div class="input-wrap">
        <input />
    </div>
    <div class="clear"></div>
</div>
<div class="fr half">
    <div class="input-wrap">
        <input />
    </div>
    <div class="input-wrap">
        <input />
    </div>
    <div class="clear"></div>
</div>
<div class="input-wrap">
    <select>
        <option>Select</option>
    </select>
</div>

CSS：

.fl { float: left; }
.fr { float: right; }

.half { width: 50%; }

input { border: 1px solid black; }

.input-wrap { margin-bottom: 14px; position: relative; }

.clear { clear: both; }

【问题讨论】：

标签： html css input

【解决方案1】：

.input-wrap div 与输入重叠。因此，当您单击输入时，实际上是在单击它们上方的 .input-wrap。

原因是包含输入的 .half div 是浮动的。简单的解决方法是在您现有的 css 上添加样式 clear:both 添加类 'clear' 到 .input-wrap div。

<div class="input-wrap clear">
    <select>
        <option>Select</option>
    </select>
</div>

见http://jsfiddle.net/mafUh/1/

【讨论】：

啊！我明白了.. 这是与顶部重叠的底部 div。 Musa 的想法是正确的，但是有很多 .input-wraps，我没有看到它是覆盖顶部的底部（因为浮动清除问题）

【解决方案2】：

感谢 Musa 的建议，将 position: relative; z-index: 1; 添加到 input {} 规则似乎有效。

http://jsfiddle.net/9PkYG/4/

但是，这似乎不是最好的解决方案，你能不能在 position: relative 中没有输入元素？？？

忽略此解决方案，我仍在寻找更好的答案。这似乎是一个错误......为什么删除选择元素或删除浮动会影响输入/包装的 z-index？

【讨论】：

【解决方案3】：

你的 div .input-wrap 在输入之上，移除 position: relative 似乎把它放在输入后面。

.input-wrap { margin-bottom: 14px; }

http://jsfiddle.net/9PkYG/3/

【讨论】：

但我需要 pos: rel;所以我可以 pos: abs 输入包装内的其他东西
你为什么不把输入放到那个div里？

【解决方案4】：

关于这个问题：还值得注意的是，如果您尝试在非原生可聚焦元素上使用 focus，您可以尝试使用 html 属性 tabindex 使其可聚焦。

【讨论】：