Selecting Valid and Invalid input Elements
Description
The :valid and :invalid selectors match input elements
that have met or failed their input validation requirements, respectively.
Example
The following code uses the :valid and :invalid Selectors.
<!DOCTYPE HTML>
<html>
<head>
<style>
:invalid {<!--from ww w .ja va 2 s . com-->
outline: medium solid red;
}
:valid {
outline: medium solid green;
}
</style>
</head>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name">Name: <input required id="name" name="name" /></label>
</p>
<p>
<label for="name">City: <input required id="city" name="city" /></label>
</p>
<button type="submit">Submit</button>
</form>
</body>
</html>