前言：

上次登录谷歌账号的时候，觉得它的输入框挺有意思的，比较好看和新颖，于是有了想实现一个的冲动， 照着它的样式，照虎画猫吧

正版ui

如下图：

盗版ui

如下图 ：

直接上代码：

【HTML】

<div class="container">

        <div class="field">
            <input type="text" required autocomplete="off" id="username" value="">
            <label for="username" title="扑街用户名" data-title="扑街用户名"></label>
        </div>

        <div class="field">
            <input type="password" required autocomplete="off" id="password">
            <label for="password" title="扑街密码" data-title="扑街密码"></label>
        </div>

    </div>

【css】

body {
  font-family: sans-serif;
}
.label-before,
.field input:valid + label::before,
.field input:focus + label::before {
  line-height: 20px;
  font-size: 12px;
  top: -10px;
  background: #fff;
  padding: 0 6px;
  left: 9px;
}
.container {
  width: 80%;
  margin: 30px 10%;
}
.field {
  position: relative;
  margin-bottom: 15px;
}
.field label::before {
  content: attr(title);
  position: absolute;
  top: 0;
  left: 15px;
  line-height: 40px;
  font-size: 14px;
  color: #777;
  transition: 300ms all;
}
.field input {
  width: 100%;
  line-height: 40px;
  padding: 0 15px;
  box-sizing: border-box;
  font-size: 14px;
  color: #222;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.field input:focus {
  outline: 0;
  border-color: blue;
}
.field input:valid + label::before {
  content: attr(data-title);
}
.field input:focus + label::before {
  color: blue;
}