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 在选择(或不选择)项目后验证输入？

→一个演示问题的小提琴

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/:无效和这个问题:Firefox 4所需的输入形式RED border/outline

使用此CSS,Firefox似乎与Chrome相同:

select:invalid {
    box-shadow: none;
}

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