Style form elements when they are empty
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.editorconfig
.gitignore
.rollup.js
.tape.js
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
INSTALL-POSTCSS.md
LICENSE.md
README-BROWSER.md
README-POSTCSS.md
README.md
package.json

README.md

CSS Blank Pseudo

NPM Version Build Status Support Chat

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 TRANSFORMED.css

Next, use your transformed CSS with this script:

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

That’s it. The script is 509 bytes and works in all browsers.


If you support Internet Explorer 11, use the browser legacy script, which is 671 bytes:

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

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">