无法找到正在应用于元素的css样式

Question

在下面的屏幕截图中，一些css样式（红色边框）正在应用于输入字段以指示错误。但是我无法确定它是哪个css选择器，Firebug不会显示任何正在应用的样式。

演示： 抱歉，该页面没有直接的网址，您可以在此处看到：

1. 转到此处：https://wordpress.org/themes/imgwize/
2. 点击“预览”按钮。
3. 向下滚动页面，然后点击第一篇文章“Hello world”。你可以在那里看到评论表。
4. 将字段留空，然后点击发表评论按钮。

Answer 1

这是Firefox浏览器的内置HTML5原生验证风格。这是通过应用required="required" HTML5标记完成的。您可以通过应用:invalid CSS伪元素来删除此样式。

textarea:invalid,
input:invalid {
   box-shadow: none;
}

Answer 2

如果您在其他浏览器上执行相同操作，例如Chrome，则会看到该表单与FireFox中的行为不同。这表明它是一个浏览器功能。我猜你注意到表单输入都有必需的属性，这可能会在留空时确定浏览器的响应。