输入和输入的CSS大纲不同：焦点

Question

我遇到了一个盒子及其相关的CSS大纲样式的问题。当盒子聚焦时，它应该有一个蓝色轮廓（工作）。在表单验证时，如果出现问题，则添加.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）。

请看这张图片：

首先是焦点，第二个是焦点没有焦点，第三个是焦点错误。注意无焦点如何导致边框在对象外扩展。

有没有好办法解决这个问题？

Answer 1

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

JSFiddle

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属性。

Answer 2

将每个outline更改为border，并为基本的input选择器提供透明边框（例如也可能是灰色的），因为它不会推动第二个输入和Voilá:) （Updated 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);
}