CSS Blank Pseudo

CSS Blank Pseudo lets you style form elements when they are empty, following the Selectors Level 4 specification.

input {
  /* style an input */
}

input:blank {
  /* style an input without a value */
}

Usage

From the command line, transform CSS files that use :blank selectors:

npx css-blank-pseudo SOURCE.css --output TRANSFORMED.css

Next, use your transformed CSS with this script:

<link rel="stylesheet" href="TRANSFORMED.css">
<script src="https://unpkg.com/css-blank-pseudo/dist/browser-global.js"></script>
<script>cssBlankPseudo(document)</script>

⚠️ Please use a versioned url, like this : https://unpkg.com/css-blank-pseudo@3.0.0/dist/browser-global.js Without the version, you might unexpectedly get a new major version of the library with breaking changes.

⚠️ If you were using an older version via a CDN, please update the entire url. The old URL will no longer work in a future release.

That’s it. The script works in most browsers.

How it works

The PostCSS plugin clones rules containing :blank, replacing them with an alternative [blank] selector.

input:blank {
  background-color: yellow;
}

/* becomes */

input[blank] {
  background-color: yellow;
}

input:blank {
  background-color: yellow;
}

Next, the JavaScript library adds a blank attribute to elements otherwise matching :blank natively.

<input value="" blank>
<input value="This element has a value">

⚠️ :not(:blank)

with option : preserve true

input:not(:blank) {
  background-color: yellow;
}

/* becomes */

input:not([blank]) {
  background-color: yellow;
}

input:not(:blank) {
  background-color: yellow;
}

When you do not include the JS polyfill one will always match in browsers that support :blank natively. In browsers that do not support :blank natively the rule will be invalid.

currently no browsers support :blank