Styling the icon for HTML date and time types

There are several HTML <input> tags with types for dates and times:

• input[type="date"]
• input[type="datetime-local"]
• input[type="month"]
• input[type="week"]
• input[type="time"]

When you use these inputs in a supported browser, you might notice that there’s a fun little clock or calendar icon in them, supplied by the browser itself.

I was working on a project the other day, and noticed that sometimes the icon wasn’t actually showing up if my inputs were in “dark” mode. It turns out that the icon can’t be styled with your typical background or color attributes in CSS, so it just… disappeared.

After lamenting to the heavens about being abandoned by a browser-supplied icon and accepting the feeling of deep betrayal, I realized that the icon probably had a way to style it, and it does!

Use ::-webkit-calendar-picker-indicator

When you select an <input> and add on ::-webkit-calendar-picker-indicator, you can style the icon as if it’s an image!

So you could, for example, add some filters:

input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.5);
}

Or change the opacity:

input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
}

Or hide it entirely and use a custom image of some kind:

input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}

input[type="time"] {
  background-image: url("custom-icon.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}

You can play with these examples here!

It’s kind of weird to me that I couldn’t find any documentation on this selector, so it might not be the best way to style things, but I also couldn’t find any other options, so… good luck, have fun!