CSS3 required styles

CSS3 required

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>
<title>CSS3 styles</title>
<style type="text/css">
  input[type="checkbox"]:required:invalid + label { color: red; }
  input[type="checkbox"]:required:valid + label { color: green; }
<input id="agree" name="agree" type="checkbox" required>
<label for="agree">I accept the <u>Terms and Conditions</u></label>

Leave a Reply

Your email address will not be published. Required fields are marked *