输入和输入的CSS大纲不同：focus答案

【问题标题】：CSS outline is different for input and input:focus输入和输入的CSS大纲不同：focus
【发布时间】：2013-01-27 05:07:33
【问题描述】：

我对一个框及其关联的 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）。

请看这张图片：

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

有什么好办法解决这个问题吗？

【问题讨论】：

你能解释一下“当你点击它时元素会跳跃吗？”
Mooseman，我在原帖中添加了一张图片。轮廓在有焦点的元素的内侧，但是失去焦点时，轮廓会跳到输入框的外侧。
@Aaron 为什么要在.error 班级中添加两次大纲？我想你的意思是用红色边框代替。
@AndresIlich 请在下面查看我的回复。我正在尝试使用轮廓，因为它应该不会改变元素的大小（即从 1px 边框开始，添加 2px 轮廓不会由于尺寸变化而导致位置偏移）。
@Aaron 为什么要添加两次大纲？一次参加.error 课程，然后再次参加.error:focus 事件？主类的声明就足够了

标签： css html

【解决方案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 属性。

【讨论】：

【解决方案2】：

将每个 outline 更改为 border 并给基本的 input 选择器一个透明边框（例如也可以是灰色的），因为它不会推动第二个输入周围 et 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);
}

【讨论】：

嗨，诺亚，感谢您的 cmets。看起来您的示例暴露了一个问题，该问题似乎是问题的根源，即我添加到基本样式中的填充。请参阅：jsfiddle.net/wHz8A/2 我还将更新我的原始帖子并提供更多详细信息。由于填充而解决对齐问题的任何想法？谢谢。