How can I change the background color of input fields of text type when entering invalid values?

css, html, responsive-design, twitter-bootstrap

Solution

Here is an example to validate an email:

HTML

<input type="email" required/>

CSS

input:invalid {
    background-color: #FFAAAA;
}

input:valid {
    background-color: #AAFFAA;
}

You can use simple HTML to validate all these data types:

tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color

Example Fiddle

Problem

How can I change the background color of input fields using CSS of fields with text type when user enters invalid values?

Original source