javascript - How to change Form colors dynamically with AngularJS? -
i have angularjs app , i'm trying change form borders live when user enters string textbox. <input type="url" name="site" class="form-control" ng-model="site" required maxlength="255"> basically i'm using ngmessages validate form. so when form valid ng-valid class input field. when form invalid ng-invalid class input field. now idea assign css styling these selectors , change border's color. didn't! .form-control.ng-valid, .form-control.ng-valid:focus { border-color: green; }; .form-control.ng-invalid.ng-dirty, .form-control.ng-invalid.ng-dirty:focus { border-color: red; }; when run code, green showed (when valid) , red didn't (while should have been red). so it's 2nd css rule isn't being inspected. if change order, red shows , green doesn't. what issue here? don't understand why such thing happen.