Form and Input Pseudo-Classes

Form and input pseudo-classes enable us to style form elements based on their state, such as whether they are checked, disabled, or valid. This enhances user experience by providing immediate visual feedback.

:checked

The :checked pseudo-class applies to radio buttons, checkboxes, and options that are selected.

This code given above changes the label color when the checkbox is checked.

:disabled and :enabled

The :disabled applies to elements that are disabled, while the :enabled applies to elements that are enabled.

In the CSS code above, the disabled inputs receive a gray background to indicate they are not interactive.

:required and :optional

The :required applies to elements with ...