[csswg-drafts] [css-selectors] Expose date input picker affordance as a pseudo element (#8359)

tylersticka has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-selectors] Expose date input picker affordance as a pseudo element ==
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 from Firefox:

<img width="153" alt="Screenshot 2023-01-24 at 12 03 03 PM" src="https://user-images.githubusercontent.com/69633/214658015-e72de3ff-e939-4afe-8f4e-d83afa26e48d.png">

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](https://bugzilla.mozilla.org/show_bug.cgi?id=1812397), and no documented standard that I could find (though @AmeliaBR kindly [pointed me](https://front-end.social/@AmeliaBR/109746965185588768) 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](https://codepen.io/tylersticka/pen/YzjaaRW)):

```css
@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:

<img width="137" alt="Screenshot 2023-01-25 at 11 22 55 AM" src="https://user-images.githubusercontent.com/69633/214666124-10de503b-d0ad-424b-bc93-568c38d164e3.png">

And Safari, which shows the fallback image:

<img width="115" alt="Screenshot 2023-01-25 at 11 23 03 AM" src="https://user-images.githubusercontent.com/69633/214666297-5e80f7dd-276f-4abe-9856-0761ae9ab3e2.png">

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

<img width="163" alt="Screenshot 2023-01-25 at 11 22 31 AM" src="https://user-images.githubusercontent.com/69633/214666489-9a31b5a7-bded-4baf-89b2-62eb28377c18.png">

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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8359 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 25 January 2023 19:26:47 UTC