html - 为什么点击后我的表单边框会改变？

Question

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

不活跃： 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 轮廓隐藏您的边框。