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

Question

我在网站上有一个带有所需属性输入的表单。

当在Firefox上激活所需属性时（当用户不填写表格时），我的输入上有一种红色边框。

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

谢谢你的答案！

Answer 1

您可以通过:valid和:invalid Pseudo class来控制它。

＆＃13;

＆＃13;

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

＆＃13;

<input type="text" required />

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

例如：

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

Answer 3

感谢您的回答，但它不起作用......

我点击提交按钮

，我的输入仍有第二个闪亮的红色边框

enter image description here