28 CSS Input Field Designs

components ui templates css-only

A CSS input field is a styled text-input control where users type information into a form. These 28 hand-coded designs are ready-to-ship inputs for sign-up forms, search bars, settings screens, and checkout flows — copy the markup, drop into your form, and ship.

28 unique inputs 18 Pure CSS 10 CSS + JS 100% copy-paste ready Published May 4, 2026

01 / 28

Floating Label

Pure CSS

Classic floating label input.

Live Demo Try it

02 / 28

Underline Sweep

Pure CSS

Minimal underline-style input.

Live Demo Try it

03 / 28

Neon Glow

Pure CSS

Cyan neon-glow input.

Live Demo Try it

04 / 28

Glass Frosted

Pure CSS

Frosted-glass input on a soft gradient.

Live Demo Try it

05 / 28

Notched Outline

Pure CSS

Material-style notched outline.

Live Demo Try it

06 / 28

Liquid Border

Pure CSS

Animated stroke that draws around the field on focus.

Live Demo Try it

07 / 28

Inline Validation

Pure CSS

Live `:valid` / `:invalid` feedback.

Live Demo Try it

08 / 28

Search with Clear

Pure CSS

Search input with a leading magnifier icon and a trailing clear button.

Live Demo Try it

09 / 28

Password Strength

Pure CSS

Sign-up password input with a live strength bar that grades red → amber → green.

Live Demo Try it

10 / 28

OTP Code

Light JS

One-time-passcode entry split across six boxes inside a single `<fieldset>`.

Live Demo Try it

11 / 28

Rotating Placeholder

Light JS

The native placeholder attribute itself rotates through four sample queries every 2.5 seconds — "Search products…" → "Search docs…" → "Search people…" → "Search settings…". Light JS swaps the attribute; the browser does the rest. Stops the moment the user focuses or starts typing.

Live Demo Try it

12 / 28

Tag Input

Light JS

Type a tag and press Enter or comma to commit it as a chip.

Live Demo Try it

13 / 28

Phone with Country

Pure CSS

Phone number input with a native `<select>` for the country dialling code.

Live Demo Try it

14 / 28

Stepper Number

Light JS

Quantity input with custom −/+ controls.

Live Demo Try it

15 / 28

File Drop Zone

Pure CSS

Drag-and-drop file input with a custom dashed boundary.

Live Demo Try it

16 / 28

Currency Input

Pure CSS

Right-aligned numeric input with an inline `$` prefix.

Live Demo Try it

17 / 28

Date Picker Native

Pure CSS

A styled `<input type="date">` keeps every native picker behaviour (keyboard, accessibility, browser/OS calendars) while the chrome matches the rest of your form.

Live Demo Try it

18 / 28

Time Range

Pure CSS

Two `<input type="time">` paired with a typographic `→` divider.

Live Demo Try it

19 / 28

Color Picker

Pure CSS

A `<input type="color">` swatch chip paired with a hex text field — both accept the same `name` and submit value via the underlying form.

Live Demo Try it

20 / 28

Search with Voice

Light JS

Search field with a microphone trigger that toggles a recording state — pulses a halo while "listening".

Live Demo Try it

21 / 28

Email with Suggestions

Light JS

When the user types `@`, common email domains are suggested in a keyboard-navigable dropdown.

Live Demo Try it

22 / 28

Auto-Grow Textarea

Pure CSS

A multi-line `<textarea>` that grows with its content using `field-sizing: content` — no JS observer needed.

Live Demo Try it

23 / 28

Inline Edit

Light JS

Click-to-edit text that swaps between a static value and an editable input.

Live Demo Try it

24 / 28

Range Slider Pro

Light JS

A native `<input type="range">` with custom track/thumb styling and a live value bubble that follows the thumb.

Live Demo Try it

25 / 28

URL with Protocol

Pure CSS

URL input with a non-editable `https://` prefix that visually integrates with the field.

Live Demo Try it

26 / 28

Credit Card

Light JS

Auto-formatted 16-digit card number with brand-aware accent (Visa, Mastercard, Amex).

Live Demo Try it

27 / 28

Toggle Password

Light JS

Password field with an eye toggle that swaps `type="password"` ↔ `type="text"`.

Live Demo Try it

28 / 28

Brutalist Input

Pure CSS

Bold offset-shadow stamp with hard edges and monospace type — a confident input that doesn't apologize for itself.

Live Demo Try it

Build your own

Tweak the exact look in our visual generators — no signup, instant copy-paste.

Generator

CSS Outline & Border Generator

Focus-ring tuning — the first thing reviewers test.

Generator

CSS Border Radius Generator

Pick input shape — pill, soft, or sharp.

FAQ

Frequently asked questions

How do I style a CSS input field?

Style the native input element directly using its tag plus a class. Reset border, padding, background and font with a single rule, then add :focus and :focus-within states for the active look. Use :placeholder-shown to detect empty fields, :has() to react to descendant state, and :valid / :invalid for live validation feedback — all without JavaScript.

Are these CSS input fields accessible?

Yes. Every demo uses a real native input or textarea, paired with a real label (either visible or visually-hidden via .sr-only). Autocomplete attributes are set correctly (email, current-password, new-password, one-time-code, cc-number, tel) so password managers and SMS autofill work. Focus states are visible and keyboard navigation is the default browser behaviour.

What's the most accessible way to do a floating label?

Keep the label as a real label element associated with the input via for=id. Drive the floated state with the :placeholder-shown pseudo-class — the label moves up when the input is non-empty or focused. This way assistive tech still announces the label as the input's accessible name.

Do these inputs need JavaScript?

Most don't — 18 of the 28 are pure CSS using :focus-within, :placeholder-shown, :valid, :has() and adjacent-sibling selectors. The other 10 (OTP, tag input, inline edit, voice search, email suggestions, credit card formatter, etc.) include small self-contained JS snippets in the JS tab of the code panel.

Will autofill and password managers work with these inputs?

Yes. Each input keeps the native element with the correct type and autocomplete attribute. The custom styling never breaks 1Password, Bitwarden, Chrome autofill, or Safari's SMS auto-suggestion.

Related collections

22 CSS Button Group Designs

22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.

button group css button group segmented control Responsive

43 CSS Button Designs

43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.

buttons hover animation Responsive

27 CSS Calendar Designs

27 hand-coded CSS calendar designs covering every search intent for 'css calendar' — pure-CSS calendar (no JavaScript), CSS Grid layouts, glassmorphism widgets, brutalist designs, dark mode UIs, neumorphic cards, horizontal timelines, sidebar widgets, booking date-range pickers, CSS Grid advent calendars, Fluent / Material Design, circular / radial layouts, retro neon cyberpunk, 3D flip cards, isometric dashboards, split-screen heroes, liquid micro-interactions, bento grid booking, vintage paper tear-offs, vertical timelines, kinetic typography, and slanted diagonal grids. 1 truly pure-CSS, 26 with small vanilla JS snippets for event handling. Scoped class names that never collide, prefers-reduced-motion respected, MIT-licensed.

css calendar css calendar design css calendar widget Responsive