Search within TutorialsPark

CSS3 Pseudo Class Form UI


Apply CSS styles based to form elements based on user Interaction with it.


CSS3 Pseudo Classes for Form UI

1. With CSS3 pseudo-class selectors for Form UI you can style form elements based on its state, or how the user interacts with the form elements.

CSS3 Pseudo-Class Selectors: Form UI

:enabled

:disabled

:checked

:default

:valid

:indeterminate

:invalid

:in-range

:out-of-range

:required

:optional

:read-only

:read-write


CSS Pseudo Class Selector - Form UI

CSS Pseudo Class :enabled and :disabled

The UI pseudo-class selectors :enabled and :disabled enable you to select and style elements based on their state. Its mostly used for form elements(which can be disabled).

:enabled To select and apply CSS styles to element that are in their enabled state.

:disabled To select and apply CSS styles to element that are in their disabled state.

Example: CSS Pseudo Class :enabled and :disabled

Give it a TRY! » Note: The :enabled and :disabled selector will not select any elements that cannot be disabled.


CSS Pseudo Selector :checked

1. CSS Pseudo Selector :checked selects checked radio buttons and checkboxes.

2. There is very little scope of styling the checkboxes, hence its mostly used with sibling selectors to style adjacent texts or labels.

Example: CSS Pseudo Selector :checked

Give it a TRY! » Note:You can use it with :not pseudo class to style unchecked inputs.


CSS Pseudo Selector :default

1. CSS Pseudo Selector :default selects default element from a bunch a similar element.

2. Usually, the submit button is used as the default button from a group of buttons.

Example: CSS Pseudo Selector :default

Give it a TRY! » Note:If an UI permits multiple selection then it may have multiple default for each of the selections.


CSS Pseudo Class :valid and :invalid

1. CSS pseudo class :valid and :invalid are used to style the appearance of input elements based on the success or failure of their validation requirements.

Example:CSS Pseudo Class :focus

Give it a TRY! » Note: :valid creates a green oultine while :invalid created a red outline around the inputs.


CSS Pseudo Class :in-range and :out-of-range

The UI pseudo-class selectors :in-range and :out-of-range enable you to select elements that have a constraint on the range of values they can attain.

:in-range To select and apply CSS styles to element that are within the specified range.

:out-of-range To select and apply CSS styles to element that are beyond the specified range.

Example: CSS Pseudo Class :in-range and :out-of-range

Give it a TRY! »


CSS Pseudo Class :required and :optional

1. CSS pseudo class :required and :optional are used to style the appearance of input elements based on whether they are required or not.

:required To select and apply CSS styles to element that have the required attribute, i.e input is a must.

:optional To select and apply CSS styles to element that do not have the required attribute, i.e input is optional.

Example: CSS pseudo class :required and :optional

Give it a TRY! » Note:The type of input does not matter, only thing that matters is the attribute required.


All CSS Attribute Selectors

Units Names Descriptions
E[attribute] Attribute Selects elements if it has the specified attribute
E[attribute="value"] Exact Value Selects elements if the Element has specified attribute equal to the exact value.
E[attribute~="value"] Spaced List Selects elements if the Element has specified attribute equal to exact value within space-separated list.
E[attribute*="value"] Contains Selects elements if the Element has specified value equal to exact value appearing anywhere.
E[attribute^="value"] Begins with Selects elements if the Element has specified attribute equal to the exact value only at the Beginning of the string.
E[attribute|="value"] Hyphenated List Selects elements if the Element has specified attribute equal to exact value within hyphen-separated list.
E[attribute$="value"] Ends with Selects elements if the Element has specified attribute equal to the exact value at the end of string.