Fade In and / or Out Placeholder Text

fade, jquery, placeholder

Solution

If you want to fade out on focus, and fade back in on blur (when the input box is empty), the following should work in webkit:

HTML:

<input id="user_email" name="user[email]" placeholder="user@example.org" type="email" />

CSS:

input[type="email"]::-webkit-input-placeholder  {
  -webkit-transition: opacity 0.3s linear; 
  color: gray;
}

input[type="email"]:focus::-webkit-input-placeholder  {
  opacity: 0;
}

jsFiddle: http://jsfiddle.net/a9UA3/

Problem

Is there a way to fade in and out an input's placeholder text? I've tried: ``` $('.userBox::-webkit-input-placeholder').animate({color: '#888888'}, 500); ``` But this just crashes...

Original source