The required selector is used to select the required element with the required attribute and set the CSS property. Required attributes of Form elements are defined as required.
Note: This selector is used with form elements, eg. <input>, <select>, and <textarea>.
Syntax:
:required {
// CSS Property
} Example: In this example we are using CSS required selector.
html
<!DOCTYPE html><html>
<head>
<title>:required Selector</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
input:required {
background-color: green;
color: white;
}
form div {
padding: 10px;
}
label {
display: block;
font-size: 18px;
}
input {
border: 1px solid black;
padding: 9px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>:required selector</h2>
<form>
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div>
<label for="email">Email</label>
<input type="email" name="email" id="email" required />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by :required Selector are listed below:
- Apple Safari 5.0
- Google Chrome 10.0
- Edge 12.0
- Firefox 4.0
- Opera 10.0