Hide placeholder text on focus with CSS
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.