CSS3 > Selectors

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

The above output is the normal output.

In the above output the background colour & border colour of the textbox is unchanged, beacuse the entered Mail ID is valid

In the above the output the background colour & border colour of the text box is changed, beacuse the entered Mail ID is Invalid.

 Views: 709 | Post Order: 16



Write for us