表格突出显示和轮廓大小答案

【问题标题】：Form highlight and outline size表格突出显示和轮廓大小
【发布时间】：2014-06-15 18:21:46
【问题描述】：

所以我有一个应该有黑色轮廓的字段。像这样

237 在哪里。但这就是我所拥有的

.r{
    height: 40px;
    font-size: 30px;
    width: 100px;   
    font-family: 'proxima_novalight';
    outline: none;
    background: none;
    outline: 3px solid black;
}

由于某种原因，当我选择该字段时，它会变小。在初始加载时，它周围有一个轮廓。一个灰蒙蒙的。你可以称它为影子Here's 演示。想法？

【问题讨论】：

标签： html css forms input field

【解决方案1】：

使用border 而不是outline 去除“影子”：

.r{
    height: 40px;
    font-size: 30px;
    width: 100px;   
    font-family: 'proxima_novalight';
    outline: none;
    background: none;
    border: 3px solid black;
}

JSBin: http://jsbin.com/cuwurowu/2/edit

【讨论】：

将您标记为答案导致尺寸更改问题已修复，而我原来的问题是。加上一个演示。谢谢。

【解决方案2】：

“阴影”是input 元素的默认边框。要删除它，请添加

.r { border: none }

（但请注意，这会影响元素的总尺寸，这在像素精确布局中可能很重要）。

Chrome 中的缩小效果（在 Firefox 或 IE 中似乎不会发生）显然是由浏览器默认样式表引起的，该样式表在元素获得焦点时在元素上设置了 outline-offset: -2px。 outline-offset 设置轮廓和元素外边缘之间的距离，因此负值会缩小轮廓。要解决此问题，请添加

 .r { outline-offset: 0 }

【讨论】：