You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2.2 KiB
2.2 KiB
CSS Blank Pseudo 
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">