单击时为什么我的表单边框会发生变化？

Question

我正在制作一个表格（有边框和轮廓）。它看起来什么时候它不活动，但一旦它处于活动状态，它就会改变。

未激活：http://gyazo.com/e8a7548efda5ffa161ed241dd1ff2d15

有效：http://gyazo.com/91a8fcabf6ffe1fccb0c5f78085f0353

任何人都知道这个问题吗？

HTML：

<form id="search" action="http://www.example.com/search.php" method="get">
    <input type="text" size="72" class="inputheight" name="search" />
</form>

CSS：

#search {
    position:absolute;
    z-index:5;
    margin-top:63px;
    margin-left:208px;
    }

.inputheight {
    height:31px;
    border:1px solid blue !important;
    outline:2px solid rgb(149,231,255) !important;
    }

Answer 1

尝试将outline-offset:0添加到.inputheight样式：

.inputheight {
    height:31px;
    border:1px solid blue !important;
    outline-offset: 0;
    outline:2px solid rgb(149,231,255) !important;
}

这是Chrome的默认样式表。当输入具有焦点时，它会将轮廓偏移设置为-2px，使您的2px轮廓隐藏边框。