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

Question

当Firefox 21绑定到angularjs模型时，Firefox 21会在必需的选择框周围绘制红色边框。

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

有没有办法让Firefox在选择（或不选择）项目后验证输入？

→ A fiddle to demonstrate the problem

Answer 1

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

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

用户输入无效数据后（ng-pristine类已更改为ng-dirty），box-shadow将再次显示b / c此规则将不再适用。

Answer 2

这实际上与AngularJS无关，但它是一个可以用CSS控制的浏览器功能。

请看一下这个MDN-Doc：https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid和这个问题：Firefox 4 Required input form RED border/outline

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

select:invalid {
    box-shadow: none;
}

http://jsfiddle.net/xLmC2/6/

Answer 3

@klamping：您的解决方案有点可行，但是：只要您开始输入另一个字段，您的字段就会获得红色阴影（因为form.ng-pristine不再存在）。< / p>

更好的方式：

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

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

@DanEEStar：仅当AngularJS 存在时才会出现此问题。您的解决方案当然有效，但完全打破了红色突出显示（即表单提交后）。

我在这里为AngularJS创建了一个错误报告： https://github.com/angular/angular.js/issues/12102

示例：

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

这是小提琴：https://jsfiddle.net/5yh58orm/11/

Answer 4

Thomas Landauer的解决方案有点工作:)，但只要您点击/聚焦该字段，字段阴影就会再次变为红色，

我建议使用：

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

Answer 5

对于angular2，这是：

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

Answer 6

要完全删除它，请在css中输入：

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

Answer 7

当我在表单外使用选择框时，我遇到了同样的问题。当我这样做时问题得到解决：

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

我认为这是一个浏览器的东西，与angular没有任何关系？