CSS: optional

Posted on

Ten years ago, HTML and CSS added the ability to, at least signal, form field validation. The required the attribute helped inform users of required fields, while pattern allowed developers to provide a regular expression to compare with a <input>the value. Targeting required fields and validation values ​​with only CSS and HTML has proven very useful.

Did you know that CSS provides :optional to allow you to style form elements that are not needed?

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

[required] {
  border: 1px solid red;

In a way it feels like :optional represented :not([required])but :optional is limited to form fields only.

  • Create Namespaced Classes with MooTools

    MooTools has always had a bit of a chagrin for not inherently using and standardizing namespace-based JavaScript classes like Dojo Toolkit does. Many developers create their classes as globals, which is generally frowned upon. I don’t generally agree with this position, but each in their own way. In any case…

  • Camera and video control with HTML5

    Camera and video control with HTML5

    Client-side APIs on mobile and desktop devices quickly deliver the same APIs. Of course, our mobile devices had access to some of these APIs first, but these APIs are slowly making their way to the desktop. One of these APIs is the getUserMedia API…

  • Duplicate jQuery homepage tooltips using MooTools

    Duplicate jQuery homepage tooltips using MooTools

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here’s how to achieve that same effect using MooTools. The XHTML The XHTML above is taken directly from the jQuery home page — no changes. The CSS The CSS above has been slightly modified to match the CSS rules already…

  • MooTools Clipboard Plugin

    MooTools Clipboard Plugin

    The ability to place content on a user’s clipboard can be extremely convenient for the user. Instead of clicking and dragging down what could be a long document, the user can copy the contents of a specific area with a single mouse click.

Leave a Reply

Your email address will not be published.