Date Picker Native
A styled `<input type="date">` keeps every native picker behaviour (keyboard, accessibility, browser/OS calendars) while the chrome matches the rest of your form. `::-webkit-calendar-picker-indicator` is recoloured to match the accent.
Date Picker Native the 17th of 28 designs in the 28 CSS Input Field Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<label class="if-date"> <span class="if-date-label">Start date</span> <input type="date" name="start" /> </label>
.if-date {
display: grid;
gap: 6px;
width: 100%;
max-width: 280px;
}
.if-date-label {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.12em;
color: #b8b6d4;
text-transform: uppercase;
}
.if-date input {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
background: #1a1a22;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
color: #f0eeff;
font:
500 14px/1 system-ui,
sans-serif;
outline: none;
transition:
border-color 0.2s,
background 0.2s;
color-scheme: dark;
}
.if-date input:focus {
border-color: #06b6d4;
background: #1f1f2a;
}
.if-date input::-webkit-calendar-picker-indicator {
filter: invert(0.7) sepia(1) saturate(5) hue-rotate(150deg);
cursor: pointer;
opacity: 0.8;
}
.if-date input::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}