css - 如何更改所需输入字段的边框颜色？

Question

我正在尝试更改必填字段的浏览器默认边框样式，它在 firefox 中使用 box-shadow，在 chrome 中使用 outline。

所以，我这样做:

*{
    box-shadow: none;
    outline: none;
}
input{
    border: 2px solid black;
}
input:invalid{
    border: 2px solid red;
}

但这显示红色边框已经加载到窗口中。但我希望它仅在无效时才显示为红色。

demo

我该如何解决这个问题？

Answer 1

因为我们只想在它获得焦点后将其表示为无效。你可以尝试这样的代码:-

input:focus:required:invalid {border: 2px solid red;}
input:required:valid { border: 2px solid black; }

DEMO HERE