开始前我们先来看下效果

看到这个，很多人都会觉得这样的效果需要通过JS来实现，如果是以前，确实需要js来完成。需要通过js来判断焦点是否在输入框上、输入框内是否有内容，输入框失去焦点后内容是否为空、文字大小位置的改变等等。

但现在我们可以完全通过纯css来实现这样的一个动效，前提是我们不需要去兼容那些低版本的浏览器，例如：IE。

首先，看下这个表单的html代码。

由于文本输入框的 placeholder 属性无法通过css来实现位置移动的效果，所以我们需要通过css的 attr() 函数往 :after 里面添加文字内容，再通过定位方式显示到输入框上面，如果输入框有 placeholder 属性的需要去掉，否则会出现文字重叠的现象。

接着我们先来写出这个文本输入框静态效果的css

这时候，输入框显示的效果是这样，只是一个静态的效果

接下来再看看如何实现输入框动态的交互效果，当鼠标点击输入框，或输入框里面有内容的时候，文字会移动到左上角。当输入框没有内容，而且失去焦点时，文字会还原到输入框内部。

这时候，就需要对输入框的状态进行判断，一个是选择状态，一个是是否有内容存在。

判断输入框是否被选中：

这个比较简单，我们可以用 input:focus 来实现。

判断输入框是否有内容：

这个要注意，不能用伪类 :valid 和 :invalid 来实现，这两个只能判断 input 初始状态，无法用于实时输入的判断，如果需要判断 input当前是否有值，我们可以用另外一种方式来判断。

使用 :placeholder-shown 伪类，通过判断 placeholder 是否显示来关联表单是否有内容。但上面提到，由于会产生文字重叠，把 placeholder 去掉了，但 :placeholder-shown 的判断依赖于 placeholder 属性，其实我们把 placeholder 的值设置成空格（注意：不是空值，而是placeholder=" "），这样就可以完美解决文字重叠的问题了。

HTML:

CSS: