html - 表格突出显示和轮廓大小

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