April 3, 2019

The Default Pseudo Class

By Cody Lewis

When you think of a :default css selector, what HTML elements come to mind?

<input type="checkbox">, <input type='radio">, and <option> are the first ones that I think of. 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, I haven't been able to find a use for it.


This content was originally published by the author at https://codylewis.net/posts/2019/03/the-default-pseudo-class/

Cody Lewis - Developer

About Cody Lewis

Cody is a self-taught developer with an eagerness to learn and the ability to think outside of the box. Cody can be found at local meetups whether speaking or attending -- he hopes to see you there.