Valid selector in CSS3

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

By using Valid selector we can represent the valid <form> or <input> elements. The value inside the <form> or <input> elements accept to the pattern is "Valid" class.

<style>
        input:valid {
            background-color: mintcream;
            border: 1px solid red;
        }
</style>

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

In the above code snippet we have given the Valid selector to the <input> element. The Valid selector finds the valid input and unchange the background colour & the border colour of the text box.

OUTPUT