The Default Pseudo Class
When you think of a :default css selector, what HTML elements come to mind?
<input type="checkbox">, <input type='radio">, and <option>1are the first ones that come to mind. But did you know that elements inside a form have defaults as well?
Radio & Checkbox Inputs
With radio and checkbox inputs, any element that has the checked attribute on page load will have the input:default styling applied to them.
In the example below, the choices “Blue” and “Morning” are the default values. The default styling on these elements persists throughout interactions with the inputs.
See the Pen :default example inputs by codylewis (@codylewis) on CodePen.
Default Form Button
Default form buttons are new to me and they are one of those “oh that’s neat” features.
The first button element within a <form> tag will be the default and styling from button:default will apply to it.
See the Pen :default example form by codylewis (@codylewis) on CodePen.
When Do I Use It?
When I was learning about the :default pseudo class, I found the selector to be intriguing. Unfortunately, there doesn’t seem to be a valid use case.
If you have a valid use case please leave a comment down below – I look forward to hearing from you.
Resources
- Styling
<select>inputs and their child<option>elements typically results in a custom dropdown and should be avoided. These cases weren’t touched on for that reason. [return]