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