Irina Glushko 2389e7160b HW1 done 3 年 前
..
CHANGELOG.md 2389e7160b HW1 done 3 年 前
LICENSE.md 2389e7160b HW1 done 3 年 前
README.md 2389e7160b HW1 done 3 年 前
browser-legacy.js 2389e7160b HW1 done 3 年 前
browser.js 2389e7160b HW1 done 3 年 前
cli.js 2389e7160b HW1 done 3 年 前
index.js 2389e7160b HW1 done 3 年 前
index.js.map 2389e7160b HW1 done 3 年 前
index.mjs 2389e7160b HW1 done 3 年 前
index.mjs.map 2389e7160b HW1 done 3 年 前
legacy.js 2389e7160b HW1 done 3 年 前
legacy.js.map 2389e7160b HW1 done 3 年 前
legacy.mjs 2389e7160b HW1 done 3 年 前
legacy.mjs.map 2389e7160b HW1 done 3 年 前
package.json 2389e7160b HW1 done 3 年 前
postcss.js 2389e7160b HW1 done 3 年 前
postcss.js.map 2389e7160b HW1 done 3 年 前
postcss.mjs 2389e7160b HW1 done 3 年 前
postcss.mjs.map 2389e7160b HW1 done 3 年 前

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