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 / } ```
From the command line, transform CSS files that use :blank selectors:
bash
npx css-blank-pseudo SOURCE.css --output TRANSFORMED.css
Next, use your transformed CSS with this script:
```html
```
⚠️ Please use a versioned url, like this : https://unpkg.com/css-blank-pseudo@3.0.0/dist/browser-global.js
Without the version, you might unexpectedly get a new major version of the library with breaking changes.
⚠️ If you were using an older version via a CDN, please update the entire url. The old URL will no longer work in a future release.
That’s it. The script works in most browsers.
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">
:not(:blank)with option : preserve true
```css input:not(:blank) { background-color: yellow; }
/ becomes /
input:not([blank]) { background-color: yellow; }
input:not(:blank) { background-color: yellow; } ```
When you do not include the JS polyfill one will always match in browsers that support :blank natively.
In browsers that do not support :blank natively the rule will be invalid.
currently no browsers support :blank