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
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • By
    Six Degrees of Kevin Bacon Using MooTools 1.2

    As you can probably tell, I try to mix some fun in with my MooTools madness but I also try to make my examples as practical as possible. Well...this may not be one of those times. I love movies and useless movie trivia so naturally I'm...

  • By
    Implement jQuery&#8217;s hover() Method in MooTools

    jQuery offers a quick event shortcut method called hover that accepts two functions that represent mouseover and mouseout actions. Here's how to implement that for MooTools Elements. The MooTools JavaScript We implement hover() which accepts to functions; one will be called on mouseenter and the other...

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!