CSS Showcase · Live Demo
Same day, better time.
Native time inputs with a styled picker indicator, minute-step values, and a duration readout computed from two times — the platform control, dressed properly.
Featured demo
mobile · sheet-rowTwo native fields, stacked — side-by-side needs ~290px, a phone frame gives 236.
mobile design patterns
time-sheet-row.css
/* From / to, stacked */
.times-row {
display: grid;
grid-template-columns: 1fr;
gap: 0.7rem;
}
.times-row label { display: grid; gap: 0.3rem; }
.times-row label span {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted-foreground);
}
.times-row input[type="time"] {
block-size: 3.25rem;
border: 1px solid var(--border);
border-radius: 0.9rem;
background: var(--card);
padding: 0 0.7rem;
font-size: 0.95rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
inline-size: 100%;
}
.times-row input[type="time"]:focus-visible {
outline: 2px solid color-mix(in srgb, var(--ring) 50%, transparent);
}CSS features used
- • input[type="time"]
- • ::-webkit-calendar-picker-indicator
- • step attribute
- • font-variant-numeric: tabular-nums
- • Dark-mode filter invert
- • Semantic tokens