Hide placeholder text on focus with CSS

07.08.2013 by Ilia Raiskin
HTML CSS Quick

In this quick-tip we will show you how to hide the placeholder text of an input or textarea when it is focussed. Most browsers hide the placeholder text when you start writing something in the text-field. When you just click inside it, which means that you focus it, the placeholder text is still visible. As already said we're going to show you how to fix that issue.

Demo


HTML

CSS

Explanation

As you can see, the code is very simple. At the moment it only works in Webkit and Mozilla browsers. We hope that other browsers will add support for the placeholder pseudo-element. Maybe you're asking yourself why there are two Mozilla prefix rules. The reason for that is that older Firefox versions don't support the ::placeholder pseudo-element. The last rule uses the :placeholder pseudo-class. CSS transitions also work with this pseudo-class. You can add a basic transition using the following code:

Note that you shouldn't use commas to combine all selectors because when a browser doesn't understand a part of such a combination it also won't render the parts that it supports.

Demo (with transition)


About the author

Ilia Raiskin

Ilia Raiskin is a web designer, web developer, blogger and founder of Toolinfy.com.






Comment