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:
- Apple Safari 5.0
- Google Chrome 10.0
- Edge 12.0
- Firefox 4.0
- Opera 10.0