:required CSS Pseudo Class
Description
The :required
pseudo-class applies style rules to the <input>
element that has the required attribute set, it allows you to select the required fields before submitting the form.
Syntax
input:required { ... }
Example
<p>
<label for="user">Username</label><input id="user" type="text" required>
</p>
<p>
<label for="email">E-mail</label><input id="email" type="text" required>
</p>
<p><label for="text">Message</label> <textarea cols="40" rows="10" id="text"></textarea>
</p>
<p>
<label> </label><input type="submit" id="send" value="Submit">
</p>
p {
margin: 0 0 5px;
}
label {
display: block;
}
input[type="text"], textarea {
width: 320px;
}
input:required {
border: 2px solid red;
}
Browser Support
Desktop | |||||
10 | 12 | 10 | 4 | 10 | 5 |
Tablets / Mobile | |||||
![]() |
|||||
4.4.3 | 18 | 4 | 10.1 | 5 | X |
Last updated by CSSPortal on: 25th November 2019
CSS Pseudo Elements
CSS Pseudo Classes
- :active
- :checked
- :default
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited