CSS :optional

By  on  

A decade ago HTML and CSS added the ability to, at least signal, validation of form fields. The required attribute helped inform users which fields were required, while pattern allowed developers to provide a regular expression to match against an <input>'s value. Targeting required fields and validation values with just CSS and HTML was very useful.

Did you know that CSS provides :optional to allow you to style form elements that aren't required?

input:optional, select:optional, textarea:optional {
  border: 1px solid #eee;
}

[required] {
  border: 1px solid red;
}

In a sense, it feels like :optional represents :not([required]), but :optional is limited to just form fields.

Recent Features

  • By
    5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

Incredible Demos

Discussion

  1. It’s probably more like :not(:required), right?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!