CSS :optional

0
40

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.

  • Tips for Starting with Bitcoin and Cryptocurrencies

    Tips for Starting with Bitcoin and Cryptocurrencies

    One of the most rewarding experiences of my life, both financially and logically, has been buying and managing cryptocurrencies like Bitcoin, Litecoin, Ethereum. Like learning any other new tech, I made rookie mistakes along the way, but learned some best practices along the way. Check out …

  • An Interview with Eric Meyer

    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer …


Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here