6

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

请看这张图片：

在此处输入图像描述

一是专注，二是不专注有错误，三是有错误有专注。请注意无焦点如何导致边框扩展到对象之外。

有没有解决这个问题的好方法？

4

2 回答 2

5

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

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

于 2017-04-26T17:11:42.757 回答
2

将每个更改outline为border并给基本input选择器一个透明的边框（例如也可以是灰色的），因为它不会在 et 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);
}
于 2013-02-12T01:37:08.217 回答