输入和输入的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

尝试显式设置轮廓偏移。任何有效（请参阅语法部分）值都可以，但为了在元素内移动轮廓，可以应用负值，例如：

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

将 every 更改outline为border并给基本input选择器一个透明边框（例如也可以是灰色），这样它就不会将第二个输入推到 et Voil\xc3\xa1 周围:)（更新了 JSFiddle）

\n\n

input{\n    font-size: 10pt;\n    border: solid 1px #9598a0;\n    padding: 2px;\n    border: solid 2px transparent;\n}\ninput:focus{\n    background: #EFF5FF;\n    color: black;\n    border: solid 2px #73A6FF;\n}\n\ninput.error:focus{\n    border: 2px solid red;\n    background: rgb(255,240,240);\n}\n\n.error {\n    border: 2px solid red;\n    background: rgb(255,240,240);\n}\n

\n