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 483 bytes and works in all browsers, as far back as Internet Explorer 11.

How it works

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

input:blank {
  background-color: yellow;
}

/* becomes */

.field[blank] label {
  background-color: yellow;
}

.field:blank label {
  background-color: yellow;
}

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

<div class="field">
  <label for="a">Field</label>
  <input id="a" value="" blank>
</div>
<div class="field">
  <label for="b">Field</label>
  <input id="b" value="This element has a value">
</div>