Question

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

.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;

}

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

Answer 1

我可以想到两个解决方案：

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

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

仅在错误布局应该显示时显示输入焦点

1 个答案: