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
    9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

  • 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...

Incredible Demos

  • By
    Hot Effect: MooTools Drag Opacity

    As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...

  • By
    Create Digg URLs Using PHP

    Digg recently came out with a sweet new feature that allows users to create Tiny Digg URLs which show a Digg banner at the top allowing easy access to vote for the article from the page. While I love visiting Digg every once in a...

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!