Package Exports

css-blank-pseudo
css-blank-pseudo/postcss

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (css-blank-pseudo) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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