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.

```css input { / style an input / }

input:blank { / style an input without a value / } ```

Usage

From the command line, transform CSS files that use :blank selectors:

bash npx css-blank-pseudo SOURCE.css TRANSFORMED.css

Next, use your transformed CSS with this script:

```html

```

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:

```html

```

How it works

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

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

html <input value="" blank> <input value="This element has a value">