如何更改必填输入字段的边框颜色？

Question

我正在尝试更改必填字段的浏览器默认边框样式，该字段在 Firefox 中使用 box-shadow 并在 chrome 中使用轮廓。

所以，我这样做：

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

但这在窗口加载时显示红色边框。但我希望它只有在无效时才为红色。

演示

我该如何解决问题？

Answer 1

应该删除required以使您的输入有效，否则对于必填字段，您可以执行以下操作

input:invalid {
  background: hsla(0, 90%, 70%, 1);
}
input:valid {
  background: hsla(100, 90%, 70%, 1);
}
input:focus {
  background: hsla(100, 90%, 70%, 1);
}
input:required {
  border-color: #800000;
  border-width: 3px;
}

更新的演示

资源