: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
The problem with hoarding is you end up living off your reserves. Eventually, you’ll become stale. If you give away everything you have, you are left with nothing. This forces you to look, to be aware, to replenish. . . . Somehow the more you give away, the more comes back to you.
Paul Arden
Random CSS Property

border-inline-style

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