Pure CSSMIT licensed

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.

Published May 4, 2026

Live Demo

Try it

The code

<label class="if-17">
  <span class="if-17-label">Start date</span>
  <input type="date" name="start" />
</label>

<label class="if-17">
  <span class="if-17-label">Start date</span>
  <input type="date" name="start" />
</label>

.if-17 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-17-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-17 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-17 input:focus {
  border-color: #06b6d4;
  background: #1f1f2a;
}

.if-17 input::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(5) hue-rotate(150deg);
  cursor: pointer;
  opacity: 0.8;
}

.if-17 input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.if-17 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-17-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-17 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-17 input:focus {
  border-color: #06b6d4;
  background: #1f1f2a;
}

.if-17 input::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(5) hue-rotate(150deg);
  cursor: pointer;
  opacity: 0.8;
}

.if-17 input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

Here's a working CSS Input Field from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Date Picker Native
Source: https://codefronts.com/components/css-input-fields/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.
## HTML
```html
<label class="if-17">
  <span class="if-17-label">Start date</span>
  <input type="date" name="start" />
</label>
```
## CSS
```css
.if-17 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-17-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-17 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-17 input:focus {
  border-color: #06b6d4;
  background: #1f1f2a;
}

.if-17 input::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(5) hue-rotate(150deg);
  cursor: pointer;
  opacity: 0.8;
}

.if-17 input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
```

Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.

Here's a working CSS Input Field from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Date Picker Native
Source: https://codefronts.com/components/css-input-fields/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.
## HTML
```html
<label class="if-17">
  <span class="if-17-label">Start date</span>
  <input type="date" name="start" />
</label>
```
## CSS
```css
.if-17 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-17-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-17 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-17 input:focus {
  border-color: #06b6d4;
  background: #1f1f2a;
}

.if-17 input::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(5) hue-rotate(150deg);
  cursor: pointer;
  opacity: 0.8;
}

.if-17 input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
```

How this works

A styled native date picker built on input type="date". The browser handles keyboard navigation, locale, min/max, and the calendar popover — CSS only touches the closed field. color-scheme: dark flips the picker chrome to the dark palette on Chromium and Firefox so the calendar itself matches the form.

::-webkit-calendar-picker-indicator is recolored with a filter stack (invert + sepia + hue-rotate) to tint the icon toward the cyan accent. This is the booking / appointment pattern used by Zocdoc, Airbnb check-in, and Calendly — you keep every native affordance and get an input type date accent-color dark theme that reads as designed.

Make it yours

Retune the filter chain on the picker indicator to match any accent hue.
Swap in accent-color to tint the calendar's selected-day chip on Chromium 93+.
Add min and max attributes to constrain bookings to a valid window.
Change the focus border-color and background to any design-token pair.

Gotchas — read before shipping

Safari's date picker popover chrome is largely unrestylable — you get the OS look regardless of your CSS.
::-webkit-calendar-picker-indicator only exists in Chromium; Firefox shows its own icon you cannot target.
Empty date inputs render placeholder text as mm/dd/yyyy per locale — you can't override that string in CSS.

Browser support

Chrome	Safari	Firefox	Edge
84+	14.1+	57+	84+

The date input itself is universal; the picker-indicator pseudo needs Chrome 84+.