CSS的轮廓线在输入框和输入框聚焦时是不同的。

Question

我遇到了一个与文本框及其关联的CSS outline样式有关的问题。当文本框获得焦点时，它应该具有蓝色轮廓线（正常工作）。在表单验证时，如果出现问题，则会添加.error类来更改轮廓线和背景颜色为红色（不正常工作）。

在焦点上，我有以下样式：

input, select {
    font-size: 10pt;
    border: solid 1px #9598a0;
    padding: 2px;
}

input:focus{
    background: #EFF5FF;
    color: black;
    outline: solid 2px #73A6FF;
}

对于错误：

input.error:focus, .error {
    outline: 2px solid red;
    background: rgb(255,240,240);
}

问题在于，失去焦点的轮廓线在输入框外部，而获得焦点时的轮廓线在输入框内部，因此在点击它时元素会跳动（CHROME）。

请参见以下图片：

第一张是获得焦点状态，第二张是失去焦点并显示错误状态，第三张是显示错误并获得焦点状态。请注意，没有焦点时边框会扩展到对象外部。

有什么好的方法可以解决这个问题吗？

- Aaron

---

你能澄清一下“当你点击它时，元素会跳动”的意思吗？ - Mooseman

Mooseman，我在原始帖子中添加了一张图片。轮廓位于具有焦点的元素内部，但当它失去焦点时，轮廓会跳到输入框的外部。 - Aaron

@Aaron，为什么你在 .error 类中添加了两次轮廓线？我想你本来是想要红色边框的。 - Andres Ilich

@AndresIlich 请看下面的回复。我正在尝试使用轮廓线，因为它不应改变元素的大小（即，从1px边框，添加2px轮廓线不会因大小更改而导致位置移动）。 - Aaron

@Aaron，在主类上将轮廓线换成1像素的红色边框就可以了。如果没有错误类，你只会得到一个灰色的1像素边框！ - Andres Ilich

Answer 1

尝试明确设置outline-offset。任何有效的值（请参见语法部分）都可以使用，但是为了将轮廓线移动到元素内部，可以应用负值，例如：

JSFiddle

(Note: The links "outline-offset" and "JSFiddle" should not be translated)

input {
    background: #EFF5FF;
    outline: solid 2px #73A6FF;
    outline-offset: -2px;
}

input.error {
    outline: 2px solid red;
    background: rgb(255,240,240);
}

虽然您在询问Chrome，但请注意IE不支持outline-offset属性。

- ko la

Answer 2

将每个outline改为border，并给基本的input选择器一个透明的边框（例如灰色），以防止它将第二个输入推开，然后Voilá :) （更新的JSFiddle）

input{
    font-size: 10pt;
    border: solid 1px #9598a0;
    padding: 2px;
    border: solid 2px transparent;
}
input:focus{
    background: #EFF5FF;
    color: black;
    border: solid 2px #73A6FF;
}

input.error:focus{
    border: 2px solid red;
    background: rgb(255,240,240);
}

.error {
    border: 2px solid red;
    background: rgb(255,240,240);
}

- Noah Wetjen

---

嗨，Noah，感谢您的评论。看起来您的示例揭示了一个问题，似乎是我添加到基本样式中的填充导致的问题。请参见：http://jsfiddle.net/wHz8A/2/ 我还将使用其他细节更新我的原始帖子。有什么解决填充导致对齐问题的想法吗？谢谢。 - Aaron