CSS Showcase · Live Demo
Inputs that adapt.
One field component that floats its label with :placeholder-shown on desktop and grows into large touch targets on mobile.
Featured demo
mobile · stacked-large Must be at least 8 characters
mobile design patterns
input-stacked-large.css
/* Large touch fields */
.field[data-pattern="stacked-large"] input {
min-height: 44px;
font-size: 1rem;
border-radius: 0.75rem;
padding-inline: 1rem;
}
.field[data-pattern="stacked-large"] label {
font-size: 0.8rem;
font-weight: 600;
}CSS features used
- • :placeholder-shown
- • Peer-style label transforms
- • Focus-visible rings
- • data-invalid styling
- • CSS custom properties
- • Semantic tokens