[selectors-4] :blank pseudo-selector support (re form fields)

[brandonmcconnell]

This is a copy from last year's Interop 2023 proposal for this same feature: #179

Description

:blank is a pseudo-selector that allows CSS to target a form field when it is blank/unpopulated.

Quoting the spec:

The :blank pseudo-class applies to user-input elements whose input value is empty (consists of the empty string or otherwise null input).

Rationale

There's currently no viable way to target a blank form field. The most common vanilla workaround for this so far is to mark the field as required and then check for :valid along with some pattern matching, however there are quite a few fundamental problems with that approach:

• What if there is already some non-blank-related validation logic at play which conflicts with the mere non-blank check?
• What if the form field should NOT be required but still styled differently when blank for aesthetic purposes?

More recently, another workaround for this that has been growing in popularity is :placeholder-shown but this doesn't appear to work when there is no placeholder set.

Open issues:

• Define :blank pseudo-class behavior whatwg/html#8451
• [selectors] decide on :blank w3c/csswg-drafts#1967

Related discussions:

• https://zellwk.com/blog/check-empty-input-css/ (great example demonstrating ALL of the above workarounds)
• https://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css
• https://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css-on-a-page-i-am-visiting-and-do-no
• https://stackoverflow.com/questions/8639282/notempty-css-selector-is-not-working
• https://stackoverflow.com/questions/4717299/css-apply-style-to-empty-inputs-value
• https://stackoverflow.com/questions/45972483/css-selector-for-empty-file-input

Specification

https://w3c.github.io/csswg-drafts/selectors-4/#blank

Tests

No tests yet, but fully spec'd and actively being discussed in the open issues listed above

[foolip]

Hi @brandonmcconnell, I'm going to close this for the same reason as #594. However, I'll add that it seems like a relatively small implementation effort. If there is a pull request for WHATWG HTML to resolve whatwg/html#8451 and test written in WPT, it's the kind of thing that could be done quickly outside of Interop. It seems like a sensible feature, and if you think it's stuck in some process/discuss, I'd be happy to take a look if requested.