CSS – :invalid Selector
The :invalid selector selects form elements with a value that does not validate according to the element’s settings.
CSS – :optional Selector
The :optional selector selects form elements which are optional (those without the required attribute).
CSS – :out-of-range Selector
The :out-of-range selector selects elements with a value that is NOT within a specified range, and only works for input elements with min/max attributes.
CSS – :read-only Selector
The :read-only selector selects form inputs which are “readonly” (those with a “readonly” attribute).
CSS – :read-write Selector
The :read-write selector selects form inputs which are “readable” and “writeable” (those with no “readonly” or “disabled” attributes).
CSS – :required Selector
The :required selector selects form inputs which are required (those with the required attribute).
CSS – :valid Selector
The :valid selector selects form inputs with a value that properly validates according to the element’s settings.
CSS – accent-color Property
The accent-color property specifies the accent color for user controls and indicators such as <input> elements, and the <progress> element.
CSS – Disable a Form Input
You may have a form field that auto populates information via JavaScript so you need to disable the input so that the user cannot change the value.
CSS – Expand a Search Field When in Use
To give a site an interesting and modern feel, the transition property can be used to expand the length of the search field when the user clicks into it.
CSS – Hide Placeholders when the Field has Focus
Placeholders are text shown inside a form field that suggests to the user the type of input requested. They can be hidden with CSS when the field has focus.
jQuery – :button Selector
The :button selector selects HTML form input elements and button elements with type=”button”.
jQuery – :checkbox Selector
The :checkbox selector selects HTML form input elements with type=”checkbox”.
jQuery – :checked Selector
The :checked selector selects all checked HTML checkboxes or radio buttons.
jQuery – :disabled Selector
The :disabled selector selects all HTML form elements that are disabled.