[css-selectors] Expose <input type=search> clear icon as a standard pseudo element

[nt1m]

Gecko is implementing a clear button for <input type=search> consistent with other browsers: https://bugzilla.mozilla.org/show_bug.cgi?id=558594 and https://bugzilla.mozilla.org/show_bug.cgi?id=1654288

Screenshot:

Webkit currently has both ::-webkit-search-decoration (search icon in front) and ::-webkit-search-cancel-button (clear button). Chromium only has the latter (and it doesn't show a search icon inside <input type=search>). Note that both these pseudos are exposed to the web. It would be nice to unship them and see how often they're used.

It would be nice to standardise:

• what's shown inside <input type=search> (ideally only the clear icon)
• a standard pseudo element like ::search-input-clear-button, so web authors can style the clear icon without hiding the default one and re-implementing their own

[SebastianZ]

I'd give the clear button a more general name to allow reusing it in other form controls, e.g. just ::clear-button.

Sebastian

[yisibl]

It's worth noting that Chrome supported displaying the clean button in the <input type=date> in older versions.

There is a strong desire from users to add this feature back: https://issues.chromium.org/issues/40694903

The clean button is also available in the Ant design component.