我有一个电子邮件输入文本字段的情况。 它有一个显示蓝色边框的焦点属性。 当电子邮件格式错误时，输入为红色边框。 但是，当已经有红色边框(即字段中的错误)并且我将焦点放在输入字段上时，我看到蓝色边框和红色边框。 这是重点类的内容:
.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;
有没有办法让我在显示红色边框时不显示焦点样式？
最佳答案
我可以想到两种解决方案:
如果 .error 类影响与焦点相同的属性(框阴影)，它将覆盖它(假设它具有更高或等效的特异性；否则使用 !important)。因此，要么将其设为红色框阴影，要么在显式删除任何框阴影的同时保留红色边框。
或者优化您的 :focus 选择器，使其不适用于 .error:input:not(.error):focus(需要 CSS3)
关于html - 当只应显示错误布局时显示输入焦点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28670194/