[css-selectors] Expose date input picker affordance as a pseudo element

[tylersticka]

Some browsers include a small calendar icon as an extra visual affordance and/or focusable date picker toggle for input elements with a type of date.

Here is an example of a barebones <input type="date"> in Firefox:

In Chrome and Edge, this affordance may be selected using the -webkit-calendar-picker-indicator pseudo element. But there is currently no comparable element in Firefox, and no documented standard that I could find (though @AmeliaBR kindly pointed me toward related issues like #5365 and #3934).

The most common use case for having this pseudo element would be to customize the appearance of the icon, perhaps for consistency with the rest of a site's experience. The use case I personally encountered was simpler: We had a report of users being confused by an affordance-less date input in Safari. We wanted to provide our own calendar icon, but only for browsers that didn't provide their own.

In theory, we'd be able to use some CSS like this (see CodePen example):

@supports not selector(::-webkit-calendar-picker-indicator) {
  input[type=date] {
    background-image: url('calendar-icon.svg');
  }
}

This works great in Chromium, which shows the native affordance:

And Safari, which shows the fallback image:

But since Firefox doesn't have a comparable pseudo element to test against, it shows both the fallback and the native affordance:

It would be helpful to have a standard in place for consistency.