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

Question

This is done automatically for every browser except Chrome.

I\'m guessing I have to specifically target Chrome.

Any solutio

Answer 1

For a pure CSS based solution:

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

Note: Not yet supported by all browser vendors.

Reference: Hide placeholder text on focus with CSS by Ilia Raiskin.