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

Question

TL;DR 点击链接

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

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

根据 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; }

Answer 1

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

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

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

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

Answer 2

position: relative; z-index: 1;多亏了 Musa 的建议，增加input {}规则似乎奏效了。

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

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

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

Answer 3

您的 div .input-wrap 在输入之上，删除 position: relative 似乎将其放在输入后面。

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

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

Answer 4

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