CSS :placeholder-shown

By  on  

One of the first plugins that would hit a new framework in the early days of JavaScript frameworks was a placeholder plugin, which is why we were so excited when HTML5 brought us the placeholder attribute. Then CSS lovers like me were thrilled when the CSS spec allowed us to style placeholders.

One recent problem I faced was wanting to apply a specific font-family to an <input> element but only when that element contained text. My initial thought was needing to set the font-family on the <input> and then re-apply the body's font-family on the ::placeholder but that didn't seem ideal -- it seemed like a maintenance cost.

I took to Twitter for a better solution and luckily Facundo Corradini provided it: :placeholder-shown. The :placeholder-shown pseudo-clas targets an <input> element's placeholder only when it's shown, and thus I could select just the placeholder but not the input's text:

/* Applying style to input applies to both input text and placeholder */
input { color: red; }

/* Applying style *just* to placeholder */
input::placeholder { color: blue; }

/* Applying style to input when placeholder is shown */
input:placeholder-shown { color: yellow; }

/* Applying style to input but *not* placeholder */
input:not(:placeholder-shown) { color: green; }

:placeholder-shown is an awesome pseudo-selector that can be used to more effectively style placeholders and their elements depending on state. Creativity isn't just a design term -- it's a way of thinking for developers to solve interesting problems!

Recent Features

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    Unicode CSS Classes

    CSS class name structure and consistency is really important; some developers camelcase classnames, others use dashes, and others use underscores.  One thing I've learned when toying around by HTML and CSS class names is that you can actually use unicode symbols and icons as classnames.

  • By
    Create Spinning Rays with CSS3 Animations &#038; JavaScript

    Thomas Fuchs, creator of script2 (scriptaculous' second iteration) and Zepto.js (mobile JavaScript framework), creates outstanding animated elements with JavaScript.  He's a legend in his own right, and for good reason:  his work has helped to inspire developers everywhere to drop Flash and opt...

Discussion

  1. Todd

    Have I missed something? It seems that styling the colour of a placeholder can be done simply with ::placeholder, because you’re only styling the placeholder it’s self. SO when the placeholder isn’t shown, the colour won’t be seen, because it’s just the colour of the placeholder. If you wanted to apply a different border colour on the input only when the placeholder is visible, you would use ::placeholder-shown.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!