Html 为什么我的窗体边框在单击时会更改？

我正在做一个表格（有边框和轮廓）。当它不处于活动状态时，它会查找，但一旦处于活动状态，它就会更改

未激活：

活动：

有人知道这个问题吗

HTML:

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

---

尝试将

轮廓偏移量：0

添加到.input样式：

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

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

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