CSS :optional
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.
![Chris Coyier’s Favorite CodePen Demos]()
David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...
![Write Better JavaScript with Promises]()
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...
![MooTools Text Flipping]()
There are lots and lots of useless but fun JavaScript techniques out there. This is another one of them.
One popular April Fools joke I quickly got tired of was websites transforming their text upside down. I found a jQuery Plugin by Paul...
![Elegant Overflow with CSS Ellipsis]()
Overflow with text is always a big issue, especially in a programmatic environment. There's always only so much space but variable content to add into that space. I was recently working on a table for displaying user information and noticed that longer strings were...
It’s probably more like
:not(:required)
, right?