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.
![Designing for Simplicity]()
Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...
![9 Mind-Blowing WebGL Demos]()
As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available...
![Save Web Form Content Using Control + S]()
We've all used word processing applications like Microsoft Word and if there's one thing they've taught you it's that you need to save every few seconds in anticipation of the inevitable crash. WordPress has mimicked this functionality within their WYSIWYG editor and I use it...
![Sara Soueidan’s Favorite CodePen Demos]()
A few months ago, Chris Coyier shared his favorite CodePen demos right here on David's blog. A while back David asked me to share some of my favorite pens too, so here are some of the demos that have blown my mind in the past...
It’s probably more like
:not(:required), right?