实例1

HTML

<div class="input-fill-x">
    <input class="input-fill" placeholder="luhan">
    <label class="input-label">luhan</label>
</div>

CSS

.input-fill{
  height: 50px;
  border-radius: 5px;
}
.input-fill:placeholder-shown::placeholder {
    color: transparent;
}
.input-fill-x {
    position: relative;
}
.input-label {
    position: absolute;
    left: 16px; top: 14px;
    pointer-events: none;
}
.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
    transform: scale(0.75) translate(0, -32px);
    background-color: #fff;
    transition: all 0.3s
}

效果

获取焦点后占位符变小上移

不支持IE
多用于移动端

---