表单 - CSS / 必需属性活动样式

Question

我在网站上有一个表单，其中包含具有必需属性的输入。

当必需属性在 Firefox 上处于活动状态时（当用户没有正确填写表单时），我的输入上有一种红色边框。

我

想知道我该如何改变它？我可以在激活时操纵所需效果的样式吗？

谢谢你的回答！

Answer 1

组合使用两个伪选择器：:required:invalid 和 :required:valid

例如：

input[type=text]:required:invalid { border-color: red; }

Answer 2

您可以通过

:valid和:invalid伪类来控制它。

 input:valid {
      border: 1px solid green;
      outline: none;
    }
    
    input:invalid {
      border: 1px solid red;
      outline: none;
    }

<input type="text" required />