元素将它们包裹起来。

  Test 1
  

                

CSS样式

为包裹的div元素设置定位方式为相对定位，一个一些内边距和外边距。

.custom-input {
  position: relative;
  padding-top: 20px;
  margin-bottom: 10px;
}                 
                

标签label元素实用绝对定位，top和left属性的值分别设置为15像素和27像素。并为所有的动画属性执行0.3秒的ease效果过渡动画。

.custom-input input {
  padding-left: 15px;
}

.custom-input label {
  cursor: text;
  margin: 0;
  padding: 0;
  left: 15px;
  top: 27px;
  position: absolute;
  font-size: 14px;
  color: #ccc;
  font-weight: normal;
  transition: all .3s ease;
}                  
                

当输入框被聚焦的时候，标签会被添加.active class类，该class类会将它的top和left属性的值修改为0。另外.focusIn class类用于修改文字的颜色。

.custom-input label.active {
  top: 0;
  left: 0;
  font-size: 12px;
}

.custom-input label.active.focusIn {
  color: #66afe9;
}                  
                

初始化插件

在页面DOM元素加载完毕之后，可以通过phAnim()方法来初始化该浮动标签插件。

$(document).ready(function() {
  $('.custom-input input').phAnim();
}
                

phAnimate浮动标签插件的github地址为：https://github.com/andrei90vs/phAnimate。