淡入和/或淡出占位符文本 [英] Fade In and / or Out Placeholder Text

问题描述

是否可以淡入和淡出输入的占位符文本?

Is there a way to fade in and out an input's placeholder text?

我尝试过:

$('.userBox::-webkit-input-placeholder').animate({color: '#888888'}, 500);

但这只是崩溃...

推荐答案

如果要淡出焦点，然后在模糊时淡回(当输入框为空时)，请执行以下操作应该可以在webkit中工作:

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="[e-mail]" 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/

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

这篇关于淡入和/或淡出占位符文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！