CSS3 required styles

Using HTML5 required style you can validate your form and show error. But sometimes you need to give a style like keep the color red for error or green on success.  Here’s how to use CSS3 required.

Here is a sample example for required css:

<!DOCTYPE html>
<html>
<head>
<title>CSS3 styles</title>
<style type="text/css">
  input[type="checkbox"]:required:invalid + label { color: red; }
  input[type="checkbox"]:required:valid + label { color: green; }
</style>
</head>
<body>
<form>
...
<p>
<input id="agree" name="agree" type="checkbox" required>
<label for="agree">I accept the <u>Terms and Conditions</u></label>
</p>
...
</form>
</body>
</html>