Web Programming with HTML5, CSS, and JavaScript

9.18 Constraint Validation Using CSS Pseudo-Classes

In the previous section, you learned how to implement number controls with attributes that define what it means for a user’s input to be valid or invalid. When entering into a form’s boxes, users sometimes enter invalid information. To help prevent that, you should consider using CSS and JavaScript so that the user is made aware of the problem and then will be inclined to re-enter with valid input. In this section, we describe how you can use CSS to customize the format of controls that have invalid input. In a later section, we describe how you can use JavaScript to display error messages after the user submits the form with invalid input.

To create a CSS rule that matches invalid-input ...