:required
Quick Summary for :required
The :required CSS pseudo-class represents any <input>, <select>, or <textarea> element that has the required attribute set on it.
Code Usage for :required
/* Selects any required <input> */ input:required {   border: 1px dashed red; } 
More Details for :required

:required

The :required CSS pseudo-class represents any <input>, <select>, or <textarea> element that has the required attribute set on it.

/* Selects any required <input> */ input:required {   border: 1px dashed red; } 

This pseudo-class is useful for highlighting fields that must have valid data before a form can be submitted.

Note: The :optional pseudo-class selects optional form fields.

Syntax

:required

Examples

The required field has a red border

HTML
<form>   <div class="field">     <label for="url_input">Enter a URL:</label>     <input type="url" id="url_input">   </div>    <div class="field">     <label for="email_input">Enter an email address:</label>     <input type="email" id="email_input" required>   </div> </form> 
CSS
label {   display: block;   margin: 1px;   padding: 1px; }  .field {   margin: 1px;   padding: 1px; }  input:required {   border-color: #800000;   border-width: 3px; }  input:required:invalid {   border-color: #c00000; } 
Result

Accessibility concerns

Mandatory <input>s should have the required attribute applied to them. This will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful submission.

If the form also contains optional inputs, required inputs should be indicated visually using a treatment that does not rely solely on color to convey meaning. Typically, descriptive text and/or an icon are used.

MDN Understanding WCAG, Guideline 3.3 explanations Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0

Specifications

Specification
HTML Standard # selector-required
Selectors Level 4 # opt-pseudos

See also

Other validation-related pseudo-classes: :optional, :invalid, :valid Form data validation

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語Português (do Brasil)Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

Please dont do this! 😜


Unknown Web Developer
Random CSS Property

margin-inline-start

The margin-inline-start CSS property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.
margin-inline-start css reference