:blank pseudo-selector support (re form fields)

[brandonmcconnell]

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.

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

Struggling to find any tests

[foolip]

I also can't find any tests. All matches for :blank in WPT are for about:blank, and typos of it fixed in web-platform-tests/wpt#36222.

[foolip]

Implementation bugs:
https://bugs.chromium.org/p/chromium/issues/detail?id=447880
https://bugzilla.mozilla.org/show_bug.cgi?id=1197736

None found for WebKit.

[annevk]

This seems like a reasonable feature, but the HTML standard needs to define how this actually works for its various elements. As far as I can tell that work hasn't been done.

E.g., does this work for textarea elements? What does it mean for <input type=range> or <input type=checkbox>?

[brandonmcconnell]

@annevk Good call out! Sharing some thoughts in the related issue you opened. Thanks!

[smaug----]

Would :blank apply when placeholder is set?

[foolip]

In the State of CSS 2022 question about browser incompatibilities, there were no mentions of :blank.

(I'm not commenting on all proposals where there wasn't any signal from State of CSS, but thought I would here because it's similar to #180 where I did comment.)

[foolip]

In the MDN short survey on CSS & HTML, "CSS :blank and :empty pseudo-classes" was selected by ~19% of survey takers, putting it in the middle third of the 20 options. (There is some uncertainty as with any survey data.)

Since :blank and :empty were bundled we can't say which of them resonated more. (This was done to reduce the total number of options.)

[nairnandu]

Thank you for proposing the :blank pseudo-selector for inclusion in Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop this year. The specifications for :blank are not yet complete enough to allow interoperable implementations. To make progress on this area in the future it will first be necessary to ensure that the feature has a clear specification in a standards track document.

For an overview of our process, see the proposal selection summary. Thank you again for contributing to Interop 2023!

Posted on behalf of the Interop team.

[brandonmcconnell]

@foolip @nairnandu Could we look into resurrecting this one for Interop 2024 as well?

[annevk]

I'm not convinced we have seen enough progress on w3c/csswg-drafts#1967 and whatwg/html#8451.

[brandonmcconnell]

@annevk Fair point. whatwg/html#8451 seems pretty thorough to me, but w3c/csswg-drafts#1967 may still require further discussion.