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

我遇到了一个盒子及其相关的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).

请看这个图像：

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

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

解决方法

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

JSFiddle

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

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

虽然您询问Chrome,但请注意IE中不支持outline-offset属性.