Martin Martin - 4 months ago 29
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>
</select>


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

→ A fiddle to demonstrate the problem

Answer

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.