Styled Date Input

Custom styling for <input type="date"> including the calendar icon via CSS pseudo-elements.

Published May 27, 2026

Demo

Default styling

Accent border

HTML
				
				<input type="date">

CSS
				
				input[type="date"] {
  appearance: none;
  padding: .7rem 1rem;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.5);
  cursor: pointer;
}

			

How it works

Date inputs can be styled with appearance: none to remove browser defaults. The ::webkit-calendar-picker-indicator pseudo-element targets the calendar icon — applying filter: invert(1) makes it visible on dark backgrounds. ::webkit-datetime-edit-fields-wrapper controls the text portion. Note: styling varies across browsers; Firefox and Safari have different support levels.