[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 call the clear button more general 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.

[yisibl]

We also need to standardize the behavior of the clear button. When the value of the input is not null:

1. Chrome displays the clear button when hovering and focusing.
2. Firefox and Safari always show it.

In order to determine if the value of the input is empty, it is currently possible to use :placeholder-shown, which is a hack that will eventually need to be implemented as :blank(https://github.com/whatwg/html/issues/8451).

[yisibl]

@nt1m Also, is it a bug that the clean button doesn't show up in iOS? https://stackoverflow.com/questions/35583503/input-type-search-no-longer-shows-cancel-button-x-under-ios