Invalid selector in CSS3

How to represent the invalid form/input element in CSS3?

By using Invalid selector we can represent the invalid <form> or <input> elements. The value inside the <form> or <input> elements does not accept to the pattern is "Invalid" class.

<style>
        input:invalid {
            background-color: lightblue;
        }
        p {
        color: red;
        }
    </style>

<body>
    Enter Your Mail ID
    <input type="email" placeholder="example@example.com" />
    <br />
    <p>Please Enter valid Mail ID</p>
</body>

In the above code snippet we have given the Invalid selector to the <input> element. The Invalid selector finds the invalid input and change the background colour of the text box.

OUTPUT