13

当绑定到 angularjs-model 时,Firefox 21 在所需的选择框周围绘制红色边框。

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

有没有办法让 Firefox在选择(或不选择)项目后验证输入?

→ 演示问题的小提琴

4

7 回答 7

17

为了解决这个问题,您可以仅在表单为原始时禁用所需的样式:

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

在用户输入无效数据后(并且 ng-pristine 类已更改为 ng-dirty),box-shadow将再次显示 b/c 此规则将不再适用。

于 2014-01-06T17:48:13.583 回答
7

这实际上与 AngularJS 无关,而是您可以使用 CSS 控制的浏览器功能。

看看这个 MDN 文档: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/

于 2013-06-20T10:10:59.680 回答
2

@klamping:您的解决方案有点工作,但是:一旦您开始输入另一个字段,您的字段就会出现红色阴影(因为form.ng-pristine不再存在)。

更好的方法:

.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/

于 2015-06-12T21:16:57.917 回答
2

Thomas Landauer 的解决方案有点用 :),但是只要您单击/聚焦该场,场阴影就会再次变为红色,

我建议使用:

.ng-pristine.ng-invalid-required { box-shadow:none; }
于 2015-12-11T15:27:19.887 回答
2

对于 angular2,这是:

.ng-pristine.ng-invalid {
  box-shadow: none;
}
于 2016-07-14T19:55:52.930 回答
1

要完全删除它,请输入 css:

:-moz-ui-invalid:not(output) {
    box-shadow: none;
}
于 2015-09-03T17:21:49.003 回答
0

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

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

我认为这是浏览器的事情,与角度无关?

于 2015-04-27T15:45:39.523 回答