当关注输入时，输入组具有负边距 - 底部显示问题

Question

我正在使用Bootstrap输入组并应用与此示例类似的负余量margin-bottom: -1px：

http://getbootstrap.com/examples/signin/

但是，如果您查看下面的屏幕截图，当我关注输入时，负边距会导致隐藏输入的底部高光。

有人可以建议如何解决这个问题吗？

我希望得到一个明显的答案，或许可以解释为什么在Bootstap登录示例中不会发生这种情况。

Fiddle

Answer 1

这应该可以解决问题。

Fiddle

.form-control:focus {
   z-index: 2;
}

在处理焦点事件\样式时，您可以使用开发者工具强制输入焦点状态并查看最新情况（至少在Chrome中您可以...）。只需右键单击元素的HTML并选择“强制元素状态” - ＆gt;“：focus”