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

Cross-browser support (or "Why can't we all just get along?")

Browser compatibility is often a "fun" game of whack-a-mole. To make sure your placeholder hiding works across browsers, look at these vendor prefixes:

/* Feeling insecure? Use a safety net. */
input:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome/Opera/Safari */
input:focus::-moz-placeholder { opacity: 0; } /* Firefox 19+ */
input:focus:-moz-placeholder { opacity: 0; } /* Firefox 4-18 */
input:focus:-ms-input-placeholder { opacity: 0; } /* Internet Explorer 10+ */


This ensures that users on various browsers all get the same great user experience.

Gracefully fade-out placeholders with transition

Don't scare away your users by making your placeholders disappear suddenly. We're not in a magic show, after all:

/* Who left the 'smooth' in the CSS? */
input::placeholder {
  transition: opacity 0.3s;
}


With CSS transition, your placeholder will gracefully fade out like my diet resolutions after New Year's.

Overlapping labels for Bollywood-style drama

Sometimes accessibility calls for a Bollywood-style love triangle – the input field, the placeholder, and the label:

/* Like my last date, labels can't commit to being visible or invisible */
label.overlabel {
  position: absolute;
  pointer-events: none;
  transition: opacity 0.3s;
}
input:focus + label.overlabel {
  opacity: 0;
}


Labels behaving like placeholders offer a visual charm, while still being a guiding angel for assistive technologies.

jQuery: Because who doesn't love more code?

If you'd rather go jQuery, here's how to make your placeholders pull a Houdini:

/* jQuery, jQuery, in the code, which is the sneakiest placeholder of all? */
$('input').on('focusin', function(){
  $(this).data('placeholder', $(this).attr('placeholder'));
  $(this).attr('placeholder', '');
});
$('input').on('focusout', function(){
  $(this).attr('placeholder', $(this).data('placeholder'));
});


This neat trick stores the placeholder text before it vanishes, and brings it back after you've finished your input.

Outsmart browser defaults with -webkit-appearance: none

Because sometimes browser styles cramp your style:

/* When you want to be the one in control */
input {
  -webkit-appearance: none;
  /* ...other styles... */
}


Setting -webkit-appearance: none; lets you maintain styling consistency by overriding default browser styles.

Interactive playground

Remember, experiments are best done outside the lab. Use JSFiddle or Stack Snippets to test, tweak, and tinker with your code, always keeping them updated with browser compatibility notes.