Skip to content
This repository has been archived by the owner on Jul 1, 2020. It is now read-only.

CSS Styling

Ghislain B. edited this page Jul 23, 2015 · 2 revisions

You could optionally add some styling to your elements, I personally prefer to have my valid elements with a green border and my invalid elements with a red border and red italic text

Note: If you want red border around your input, make sure to make it show after it's dirty and touched by using the CSS ng-dirty and ng-touched. So for my personal config, I use the following CSS:

/* AngularJS Form validation styling */
.validation.help-block {
    color: #E07676;
    font-style: italic;
}

/* invalid & (dirty or touched) => red -- CSS3 only */
.ng-invalid.ng-dirty:not(:focus),
.ng-invalid.ng-touched:not(:focus) {
    border-color: #e74c3c;
}

/* valid & dirty => green */
.ng-valid.ng-dirty.ng-touched {
    border-color: #2ecc71;
}

/* error display font italic, text-danger is red in BS */
.validation.text-danger {
    font-style: italic;
}
Clone this wiki locally