peach a19a732be8 commit message | před 2 roky | |
---|---|---|
.. | ||
CHANGELOG.md | před 2 roky | |
LICENSE.md | před 2 roky | |
README.md | před 2 roky | |
browser-legacy.js | před 2 roky | |
browser.js | před 2 roky | |
cli.js | před 2 roky | |
index.js | před 2 roky | |
index.js.map | před 2 roky | |
index.mjs | před 2 roky | |
index.mjs.map | před 2 roky | |
legacy.js | před 2 roky | |
legacy.js.map | před 2 roky | |
legacy.mjs | před 2 roky | |
legacy.mjs.map | před 2 roky | |
package.json | před 2 roky | |
postcss.js | před 2 roky | |
postcss.js.map | před 2 roky | |
postcss.mjs | před 2 roky | |
postcss.mjs.map | před 2 roky |
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 */
}
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>
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">