Nitrate Processed Mincemeat

    css-blank-pseudo

    2.0.0 • Public • Published

    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.

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

    Install

    npm i css-blank-pseudo

    DownloadsWeekly Downloads

    3,824,331

    Version

    2.0.0

    License

    CC0-1.0

    Unpacked Size

    63.4 kB

    Total Files

    18

    Last publish

    Collaborators

    • jonathantneal