CSS Forms & Validation Effects

Custom checkbox that springs a white tick into a blue box, with a real focus ring.

Radio group whose selected dot pops into a blue ring — no JavaScript, pure :checked.

Native select with the OS arrow stripped and an ocean chevron that nudges down on hover.

Dashed upload target that tints ocean and spins its plus badge when you hover it.

Six-box verification code field with an ocean caret and a lift on the focused digit.

Paired valid / invalid fields with inline messages, glyphs and matching focus rings in ocean.

Password field with a four-segment ocean strength meter that fills left to right.

Whole card is the label, so the entire row is a hit target, with the tick scaled from zero rather than toggled on `display`.

Field and its meta bar joined into one control by removing the shared border, both taking the focus color so they light as a unit.

Chips, a typeahead and an option list in one control, the menu opening on `:focus-within` so it survives tabbing into the field.

Payment entry as one joined control — number above, expiry and CVC sharing the row below — with the detected brand mark sitting inside the field it applies to.

Signing surface with a dashed baseline and cross mark, the stroke revealed left to right by an animated inset clip so it draws rather than fades in.

Number input flanked by minus and plus caps that fill with the accent when hovered.

Checkout step with a three-segment progress head, a paired expiry and CVC row, and back and continue actions.

Red summary block counting the form errors above the fields themselves, where hovering one of the listed messages rings the field it belongs to and reddens its label.

Immutable prefix and input sharing one bordered wrapper, so the focus ring surrounds the whole control instead of half of it.

Value that reads as text until hovered, when a border and a pencil appear — the settings pattern that avoids a separate edit mode.

Repeatable row group where every entry carries its own remove control and the add affordance is dashed, marking it as the one row that is not yet data.

Dial code chosen inside the field it prefixes rather than in a separate control, with the valid state marked at the trailing edge where the eye finishes the line.

Borderless field with a thin bottom rule where an accent underline grows outward from the centre on focus.

Eleven-point recommendation scale where detractor and promoter halves preview in different colours and the choice lifts out of the row.

Five-star input showing a saved rating of four, where sweeping across it clears the stored fill and repaints the row up to whichever star sits under the pointer.

Text field that holds removable tag chips inline, with the chip close buttons and the field border reacting on hover and focus.

Address field with a suggestion list hanging below it, each row giving the street on one line and the locality on the next.

Title field with the published address mirrored underneath it, the slugged half highlighted inside a dashed strip and a copy button sliding over the end on hover.

Text field whose placeholder label shrinks and floats to the top edge on focus or when a value is entered.

Segmented time field with separate hour and minute boxes that tint on focus and an AM/PM switch pinned to the right.

Profile checklist headed by a conic progress ring reading sixty percent, with the finished requirement ticked and greyed and each outstanding one offering an add button on hover.

Radio group styled as a segmented pill control where the checked option gets a filled, glowing thumb.

Drop target followed by one row per file, each carrying its own progress bar and a done, percentage or failure marker.

Draft editor with a blinking caret and a green saved stamp in its header that swaps for a spinning saving indicator the moment the field is touched.

Radio group of colour swatch dots where the checked swatch grows an offset ring and a tick.

Checkbox that unrolls a hidden group of fields beneath it, the extra inputs staying out of the layout until they are needed.

Licence text scrolling inside a fixed frame that fades out at its bottom edge, above a dimmed accept row whose disabled button explains on hover that the text must be read to the end.