CSS大纲出现在意想不到的地方

Question

这可能是一个愚蠢的问题，但这件事困扰着我，而不是应该。众所周知，谷歌浏览器默认情况下会突出显示<input>元素。我不喜欢它的默认外观，所以我在我的CSS上为outline选择器实现了我自己的focus：

#LoginForm input:focus {
    outline: #1F377A dotted 1px;
}

原始Chrome的实现如下所示（请注意围绕文本输入的蓝色轮廓）：

但是通过使用我自己的css实现，它看起来像这样：

为什么我的轮廓出现在文本输入中而不是像Chrome的默认轮廓那样？

这些是我输入元素的相关css行：

#LoginForm input {
    display: blocK;
    float: left;
    height: 24px;
    border: none;
    font-family: inherit;
    margin: 0px 0px 0px 4px;
}

#LoginForm input:focus {
    outline: red solid 1px;
}

#LoginForm .textInput {
    padding: 0px 2px 0px 2px;
    font-size: 9pt;
}

让我在我自己和Chrome的大纲之间改变的唯一方法就是评论input:focus选择器而已。我不想使用边框，因为实际上增加了元素的大小而且我不想要它。

Answer 1

如果检查chrome dev工具，则轮廓不是简单的1px轮廓，而是显示为

:focus {
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
    outline-width: 5px;
}

input:focus, textarea:focus, keygen:focus, select:focus {
    outline-offset: -2px;
}

outline-offset就是你要找的地方。要有红色轮廓，只需将其添加到样式表：

:focus {
     outline-color: #f00;
}

如果您还想在其他元素上使用：

.element:focus {
    outline-color: #f00;
    outline-style: auto;
    outline-width: 5px;
    outline-offset: -2px;
}

这是一个JSFiddle来玩。

---

编辑：

要使轮廓完全在边框上（而不是在其内部），您必须设置

outline-offset: 0;

覆盖chrome用户代理样式。