CSS3的输入框提示文字效果

一款简单的CSS3输入框提示文字效果，输入框为focus状态时，其提示文字会有一个向上移位位置变化，以及当前输入框的的边框有一个颜色填充的效果。

分类：css3 > 表单难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入一个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css"/>

页面的body部分，用了多个div的嵌套结构放了不同的input输入框，代码如下：

<div class="page">
  <div class="page__demo">
    <div class="main-container page__container">
      <div class="page__section">
        <label class="field field_type1">
          <input class="field__input" placeholder="输入名称">
          <span class="field__label">输入名称</span>
        </label>
      </div>
      <div class="page__section">
        <label class="field field_type2">
          <input class="field__input" placeholder="输入手机">
          <span class="field__label">输入手机</span>
          <span class="field__line"></span>
        </label>
      </div>
      <div class="page__section">
        <label class="field field_type3">
          <input class="field__input" placeholder="输入邮箱">
          <span class="field__label">输入邮箱</span>
          <span class="field__line"></span>
        </label>
      </div>      
    </div>
  </div>
</div>