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