CSS Showcase · Live Demo
Count anything, step by step.
Quantity pickers, currency and unit affixes, native spin buttons, and cart-style rows — number inputs that keep 44px touch targets and tabular digits.
Featured demo
mobile · touch-steppersServings
3.75rem-tall buttons — comfortably above the 44px floor.
mobile design patterns
number-touch-steppers.css
/* Big touch steppers */
.touch-stepper {
display: grid;
grid-template-columns: 4.5rem 1fr 4.5rem;
align-items: center;
border: 1px solid var(--border);
border-radius: 1rem;
background: var(--card);
overflow: clip;
}
.touch-stepper button {
block-size: 3.75rem;
display: grid;
place-items: center;
font-size: 1.25rem;
transition: background-color 0.15s ease;
}
.touch-stepper button:hover { background: var(--accent); }
.touch-stepper button:active { background: color-mix(in srgb, var(--accent) 60%, transparent); }
.touch-stepper output {
text-align: center;
font-size: 1.4rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
}CSS features used
- • appearance: textfield
- • ::-webkit-inner-spin-button
- • :focus-within rings
- • font-variant-numeric: tabular-nums
- • color-mix() active states
- • Semantic tokens