The :valid selector is used to select the form elements with a given value that validates according to the elements. This selector only works for form elements with some limitations such as input elements with min and max attributes, email fields with a legal email, or number fields with a numeric value, etc.
Syntax:
:valid {
// CSS property
}
Example: In this example, The :valid selector is used to styling valid input elements, applying green background color and white text color.
html
<!DOCTYPE html>
< html >
< head >
< title >valid selector</ title >
< style >
h1 {
color: green;
}
input:valid {
background-color: green;
color: white;
}
body {
text-align: center;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >:valid Selector</ h2 >
Email Address:
< input type = "email"
placeholder = "abc@gfg.com" >
</ body >
</ html >
|
Output: Supported Browsers: The browser supported by :valid selector are listed below:
- Apple Safari 5.0
- Google Chrome 10.0
- Edge 12.0
- Firefox 4.0
- Opera 10.0
Last Updated :
04 Aug, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...