CSS Showcase · Live Demo
One picker. Many patterns per device.
Pick a device, then pick a design pattern for that device — desktop offers inline, two-pane, and combobox pickers; mobile offers a bottom sheet and a full-screen page.
Featured demo
mobile · sheetmobile design patterns
selects-sheet.css
/* Bottom sheet (mobile) */
.select-panel {
position: fixed;
left: 0;
right: 0;
bottom: 0;
border-radius: .75rem .75rem 0 0;
animation: sheet-up .25s ease both;
}
@keyframes sheet-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}CSS features used
- • Container queries
- • CSS Grid responsive columns
- • Custom select panels
- • Chip / tag styling
- • Mobile bottom sheet
- • Semantic tokens