输入和输入的 CSS 轮廓不同 :focus

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