Categories
Css3 Html5

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.

You may like:  New html5 tips and techniques

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>
Avatar for Namaste UI (Author)

By Namaste UI (Author)

Namaste UI collaborates closely with clients to develop tailored guest posting strategies that align with their unique goals and target audiences. Their commitment to delivering high-quality, niche-specific content ensures that each guest post not only meets but exceeds the expectations of both clients and the hosting platforms. Connect with us on social media for the latest updates on guest posting trends, outreach strategies, and digital marketing tips. For any types of guest posting services, contact us on info[at]namasteui.com.

Leave a Reply

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