Martin Martin - 9 months ago 64
AngularJS Question

Firefox draws red border on required select box

Firefox 21 draws red borders around required select-boxes when they are bound to an angularjs-model.

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

Is there a way to let Firefox validate the input after selecting (or not selecting) an item?

→ A fiddle to demonstrate the problem


To get around this, you can disable the required style for when the form is pristine only:

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

After a user has entered invalid data (and the ng-pristine class has changed to ng-dirty), the box-shadow will show again b/c this rule will no longer apply.