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

:optional

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

/* Selects any optional <input> */ input:optional {   border: 1px dashed black; } 

This pseudo-class is useful for styling fields that are not required to submit a form.

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

Syntax

:optional

Examples

The optional field has a purple 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:optional {   border-color: rebeccapurple;   border-width: 3px; } 
Result

Accessibility concerns

If a form contains optional <input>s, required inputs should be indicated using the required attribute. 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 form submission.

Required inputs should also 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-optional
Selectors Level 4 # opt-pseudos

See also

Other validation-related pseudo-classes: :required, :invalid, :valid Form data validation 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
“We ought to take outdoor walks in order that the mind may be strengthened and refreshed by the open air and much breathing.".
Seneca
Random CSS Property

var()

The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property.
var() css reference