1812397 - Pseudo element for calendar icon affordance on date inputs

Status: UNCONFIRMED

(Core :: Layout: Form Controls, enhancement)

Description

[Tyler Sticka]

Attachment: Screenshot 2023-01-24 at 12.03.03 PM.png

Steps to reproduce:

An input element with a type of date now shows a calendar icon as an affordance for displaying the date picker.

This is a great usability and accessibility addition, but it currently seems to lack a pseudo element selector for customizing that element's styles or testing for its presence using @supports selector. This is inconsistent with similar elements, such as file-selector-button for file inputs.

For comparison, Chromium's calendar affordance corresponds to the pseudo element -webkit-calendar-picker-indicator.

Actual results:

A date input has no apparent way of styling or testing for the presence of the date picker icon affordance via CSS.

Expected results:

The date input should expose a pseudo element for the date picker affordance.

Comment 1

[Koos]

In Firefox versions prior to 109, the icon could be targeted with input[type="date"]::-webkit-calendar-picker-indicator. As websites that add a custom icon now show two icons, this seems to be an error.

Comment 2

[fredericlim.developer]

We also have the same issue in our application. The previous pseudo element does not work anymore.

Comment 3

[Tom Chiverton]

And here too, FireFox v120 Snap on Ubuntu 22.04 LTS

Comment 4

[thomaskl2005]

This bug is hindering deployment of standardized date inputs in many organization sites, where a custom datepicker is preferred.