表格突出显示和轮廓尺寸

Question

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

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

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

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

Answer 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

Answer 2

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

.r { border: none }

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

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

 .r { outline-offset: 0 }