How do I auto-hide placeholder text upon focus using css or jquery?

jquery css html google-chrome placeholder
LondonGuy picture LondonGuy · Mar 14, 2012 · Viewed 298.6k times · Source

This is done automatically for every browser except Chrome.

I'm guessing I have to specifically target Chrome.

Any solutions?

If not with CSS, then with jQuery?

Kind regards.

Answer

Rob Fletcher picture Rob Fletcher · Sep 3, 2012

Edit: All browsers support now

input:focus::placeholder {
  color: transparent;
}
<input type="text" placeholder="Type something here!">

Firefox 15 and IE 10+ also supports this now. To expand on Casey Chu's CSS solution:

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

Related questions

How can I remove the "No file chosen" tooltip from a file input in Chrome?

I would like to remove the "No file chosen" tooltip from a file input in Google Chrome (I see that no tooltip is displayed in Firefox). Please notice that I'm talking not about the text inside the input field, but …

Read More
Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More
Click button copy to clipboard using jQuery

How do I copy the text inside a div to the clipboard? I have a div and need to add a link which will add the text to the clipboard. Is there a solution for this? <p class="content"&…

Read More