Input Styling

Styling inputs can be confusing and frustrating. Some familiar style properties such as background-color, color, and font-size work as expected. Other useful selectors, pseudo-classes, and, pseudo-elements for inputs are demonstrated in the example below, including:

• accent-color: Changes the color of a checked radio button.
• :active: Selects buttons when they are in the active state (during a click, before the mouse is released).
• :focus: Selects inputs when they are in the focus state (i.e., when the cursor is inside the input field)
• outline: Changes the highlight color around inputs when they are in the focus state.
• ::placeholder: Selects the placeholder text (set using the placeholder attribute) for styling.

See the Pen Input Styling (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.