Firefox输入错误的红色方框阴影

Question

因此，我在不同的浏览器上测试了我的应用程序，以确保一切正常，当我使用Firefox时，我感到惊讶，我的输入之一周围有一个红色的大方框阴影。

但是更奇怪的是，如果输入为空，红色阴影消失了

经过调查，我发现输入的内容是电子邮件类型，而不是文本。

之所以令我感到惊讶的原因是，我测试过的其他浏览器没有一个对输入有任何作用（即使是EDGE！），在chrome上，只有当我将鼠标悬停在输入上方时，它才会显示一条消息："it is missing a @"。

最明显的解决方法是将输入的类型更改为文本，但是我的输入不在form标记内，并且在单击按钮时JS提取了输出，因此使用此设置向上，我应该不会看到任何错误，也不会像chrome那样，在悬停时的title属性中会看到一条错误消息。

来自MDN docs：

  

：valid和：invalid CSS伪类将在适当时自动应用，以直观地指示该字段的当前值是否为有效的电子邮件地址。

浏览器已经在根据输入的状态（有效/无效）添加伪类，并允许开发人员轻松地实现错误样式以使其看起来合适。

为什么firefox在不通知我们的情况下对输入的错误应用样式如此粗鲁？

我知道，通过将类型设置为电子邮件，我们基本上会告诉浏览器：“嘿，请检查此输入是否对我有效，是吗？”但是在输入中应用伪类和在输入周围应用红色大边框是两件事。

仅当输入位于表单标签内时，才添加样式不是更好吗？毕竟，使用这种样式的文件称为Forms.css，这样做是最有意义的，而不是将其应用于显然在HTML之外处理的输入。

我如何确定将来不会发生这种情况？

我应该从现在开始将样式添加到：invalid伪类中吗？因为在样式中添加一个简单的box-shadow：none不会削减它，我必须比这更具体，否则还有其他方法吗？