Html Firefox在所需的选择框上绘制红色边框

当所需的选择框绑定到angularjs模型时，Firefox21会在其周围绘制红色边框

<select ng-model="color" ng-options="c.text for c in colors" required>
   <option value="">-- choose color --</option>
</select>

--选择颜色--

有没有一种方法可以让Firefox在选择（或不选择）一个项目后验证输入

---

这实际上与AngularJS无关，而是一种浏览器功能，您可以使用CSS进行控制

看看这个MDN文档：还有这个问题：

使用此CSS，Firefox的行为似乎与Chrome相同：

select:invalid {
    box-shadow: none;
}

---

要解决此问题，您可以在表单仅为原始状态时禁用所需的样式：

.ng-pristine .ng-invalid-required {
    box-shadow: none;
}

---

用户输入无效数据（且ng pristine类已更改为ng dirty）后，

框阴影将再次显示b/c此规则将不再适用。
我在表单外使用选择框时遇到了相同的问题。当我这样做时，问题得到了解决：

<form novalidate>
    <select>
    <option value=""></option>
    </select>
</form>



我认为这是一个浏览器的东西，与angular无关
 @klamping：您的解决方案有点可行，但是：一旦您开始在另一个字段中键入，您的字段就会出现红色阴影（因为
form.ng pristine
不再存在）

更好的方法：

.ng-untouched.ng-invalid-required { box-shadow:none; }

缺点：当用户提交表单时，如果没有点击此字段，则不会显示红色阴影（但会显示弹出的工具提示）

@DanEEStar：只有AngularJS在场时才会出现问题。您的解决方案当然有效，但会完全破坏红色高亮显示（即在表单提交之后）

我在这里为AngularJS创建了一个bug报告：

例如：

<div ng-app>
<form>
<input type="text" ng-model="a" required>
</form>
</div>



这里有一个技巧：
要完全删除它，请在css中键入：

:-moz-ui-invalid:not(output) {
    box-shadow: none;
}

Thomas Landauer的解决方案有点有效：），但只要你点击/聚焦场，场阴影就会再次变为红色

我建议使用：

.ng-pristine.ng-invalid-required { box-shadow:none; }

对于angular2，这是：

.ng-pristine.ng-invalid {
  box-shadow: none;
}

在你的小提琴中没有“必需”的输入元素…对不起，丹。我的链接错了。请再试一次。谢谢，这是个好消息。但实际上我希望Firefox验证输入。但对mee来说，如果Firefox在用户选择任何内容之前将边框涂成红色，这似乎没有意义。问题仍然是，Firefox是否只能在用户操作后才被教导验证select字段……这似乎是angularjs的一个奇怪错误。FF在输入字段模糊后进行验证。角度验证器似乎击中了表单中的每个字段，因此FF认为用户快速通过了它们。仍然没有解决办法。我们使用了一个变通方法。是的，这个错误与角度无关。实际上，Angular/Redux表单为您提供了使用原始类很容易修复此错误的工具。不幸的是，禁用：invalid上的框阴影不是一个很好的解决方案。它不应该是
.ng pristine.ng invalid required
（之间没有空格），以便将其应用于单个元素而不是父/子结构？根据我上面的评论，请参阅liqian的答案。在发表评论之前我没有注意到。我对此提出了一个bug，因为此解决方案仅适用于Angular（根据问题）：