是否可以在Firefox的必填输入字段上重置'：invalid'CSS伪类？

Question

我有一个与Ajax一起提交的表格。 发送数据后，我只是清空所有字段，但是我在firefox上注意到了，红色的阴影框保留在必填字段上。

以下是问题的一个示例：

input:invalid {
}

input:valid {
}


body {
  padding: 3em;
}
fieldset {
 border: 0;   
}
input {
  padding: 0.25em 0;
  margin-bottom: 0.75em;
}

<fieldset>
  <label for="email">Reset when empty:</label>
  <input type="email" name="email">
</fieldset>
  
<fieldset>
  <label for="emailRequired">Not reset when empty (required):</label>
  <input type="email" name="emailRequired" required>
</fieldset>

我可以通过以下方式纠正该问题（但还会创建其他问题）：

input:invalid {
    box-shadow:none;
}  

是否可以在不添加样式的情况下重置正常行为？