CSS3 > Selectors

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

The above output is normal output.

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

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

 Views: 752 | Post Order: 15



Write for us