Firefox draws red border on required select box

Question

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 1

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.

Answer 2

This has actually nothing to do with AngularJS but is a browser feature which you can control with CSS.

Take a look at this MDN-Doc: https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid and this question: Firefox 4 Required input form RED border/outline

With this CSS, Firefox seems to behave the same as Chrome:

select:invalid {
    box-shadow: none;
}

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