Faux placeholder clearing with CSS

Maybe you're like me, and you're not crazy about the way the placeholder attribute works for text fields. I think the placeholder text should clear once the input has focus. Instead, the text only clears after the user starts typing.

The good news is that we can modify this behavior without (completely*) compromising accessibility by changing the color of the placeholder text to transparent (or using an RGBa/HSLa color with a 0 alpha).

Below, is a snippet of CSS that shows you how to do this. It uses vendor-specific pseudo-elements, which is currently the best/only way to do this. In the future, I suspect we'll have a standard placeholder or input-placeholder selector. For now, we need to take this less-than-standard approach.

:focus::-webkit-input-placeholder{
    color: transparent;
}
:focus::-moz-placeholder { 
    color: transparent;  
}

:focus:-ms-input-placeholder {  
    color: transparent;
}

Here we're using the transparent keyword of the color property, but you could also use rgba(0,0,0,0) or background: hsla(0%,0%,0%,0);.

And a demo

*I haven't actually tested how the placeholder attribute works with assistive technology, so keep that in mind. If you happen to, please let me know if you run into problems.