Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
Jun 10, 2019
Nov 17, 2018
Nov 17, 2018
Jun 10, 2019
Jun 10, 2019
Jun 10, 2019
Jun 10, 2019
Jun 10, 2019
Nov 17, 2018
Nov 17, 2018
Nov 17, 2018
Nov 17, 2018
Nov 17, 2018
Nov 17, 2018
Jun 10, 2019

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

About

Style form elements when they are empty

Resources

License

Releases

No releases published

Packages

No packages published