Floating labels, filled and outlined fields, focus rings.
An input has five states and a form design that only covers two is the most common reason a form feels cheap. These define rest, hover, focus, filled and error on every variant. The floating-label versions use `:placeholder-shown` rather than JavaScript, so the label position follows the actual value instead of a class somebody forgot to remove.
A label that starts centered and gracefully floats up to the corner when the field is focused or filled.
Minimalist input whose bottom border grows in from the left on focus for an elegant material reveal.
A framed visual that smoothly zooms in on hover while the overlay text stays sharp — common in image galleries.
A link whose underline wipes in from left to right on hover and wipes out the same way on leave.
A pill chip whose arrow shoots up and to the right on hover, while the surface fills with color.
A pure-CSS iOS-style toggle with a hidden checkbox, smooth slide, and accessible focus ring.
A native checkbox restyled with appearance:none — fills with indigo and draws an animated checkmark when checked.
A dark chip that reveals a small floating tooltip with an arrow above it on hover, using only pseudo-elements.
Four overlapping circular avatars that fan out horizontally on hover, with each one rising to the top in turn.
Blue input whose label floats above on focus or when filled.
Minimal input whose ocean underline grows from left on focus.
Slate framed tile whose ocean content zooms in on hover.
Text field with a 3px blue focus ring and a label that lights via :focus-within. Keeps a visible focus state instead of removing it.
Search input with a CSS-drawn magnifier and a ⌘K keycap hint, lighting ocean on focus.
Dashed blue dropzone that tints and lifts on hover, with a CSS-drawn upload arrow.
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.
Icon-only field that widens into a full ocean search box on hover or focus.
Six single-character boxes that mark themselves filled with `:not(:placeholder-shown)`, so state comes from the value rather than a class.
Showing 24 of 73. Search the rest →
Error, success and required styling driven by CSS selectors.
Inputs, selects, checkboxes, radios and segmented controls.
Support requests, sales enquiries, split map-and-form layouts.
What happens under the cursor, across inputs, links and tiles.
Navigation bars, mega menus, context menus and flyouts.
Draw-on strokes, morphs, spins and shape reveals.