仅应显示错误布局时显示输入焦点答案

【问题标题】：input focus is being displayed when only the error layout should be仅应显示错误布局时显示输入焦点
【发布时间】：2015-02-23 17:49:13
【问题描述】：

我有一个电子邮件输入文本字段的情况。它有一个显示蓝色边框的焦点属性。当电子邮件格式错误时，输入框为红色边框。但是，当已经有红色边框（即字段中的错误）并且我将焦点设置在输入字段上时，我会看到带有红色边框的蓝色边框。这是焦点类的内容：

.myClass:focus{
 box-shadow: 0 0 3px #50BADE,inset 0 1px 3px rgba(0, 0, 0, .05);
        -webkit-box-shadow: 0 0 3px #50BADE,inset 0 1px 3px rgba(0, 0, 0, .05);
        -moz-box-shadow: 0 0 3px #50BADE,inset 0 1px 3px rgba(0, 0, 0, .05);
}

这是红色边框的类：

.input.error {
padding: 5px;
border-radius: 5px;
border: 1px solid #DD4B39;

}

有没有办法确保在显示红色边框时不会显示焦点样式？

【问题讨论】：

你能发布一个你到目前为止尝试过的演示吗？

标签： html css

【解决方案1】：

我能想到两种解决方案：

如果 .error 类影响与焦点相同的属性（box-shadow），它将覆盖它（假设它具有更高或等效的特异性；否则使用!important）。因此，要么将其设为红色框阴影，要么保留红色边框，同时明确移除任何框阴影。

或优化您的 :focus 选择器，使其不适用于 .error: input:not(.error):focus（需要 CSS3）

【讨论】：

感谢您的帮助。我将它设置为 !important 并且可以正常工作。