聚焦时输入收缩 - Chrome答案

【问题标题】：Input contracted when in focus - Chrome聚焦时输入收缩 - Chrome
【发布时间】：2015-02-26 18:46:10
【问题描述】：

我有一些样式的简单输入。

 input {
    	display: block;
    	width: 100%;
    	padding: 4px 6px;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	-ms-box-sizing: border-box;
    	box-sizing: border-box; 
    }

  <input type="email" id="email" name="email" placeholder="Email">

该代码在 Firefox 上运行良好。但是，在 Chrome 中，当输入聚焦时，它会缩小一点（比正常状态小）。我尝试在此输入上应用边框大小，但问题仍然存在。我该如何解决？

【问题讨论】：

如果你输入：focus{outline:0;} 将把焦点移开，然后你可以从那里操作它......
你在使用来自 twitter-bootstrap 的任何默认类吗？？？。您可以使用 class=form-group 来包装您的表单，并使用 class=form-control 来包装您的输入框。这应该能够在每个浏览器中几乎完全呈现。
@JosephCC 我使用引导程序，但我不想将我的输入包装为表单控件，因为我想以不同的方式设置它。我尝试申请input:focus{ outline: 0; }，但它不起作用
*:focus{outline:none!important;边界：0！重要；盒子阴影：无！重要；}。试试看……

标签： html css twitter-bootstrap boxsizer

【解决方案1】：

使用:focus 伪类。

input:focus {
    outline: none;
}

像这样：JSFiddle。

它在 Chrome 和 Firefox 中也适用于我。也值得考虑使用normalize.css（或类似的东西），以避免（或修复）浏览器默认的css属性设置。

【讨论】：