开场
今天我们的主角是伪类：placeholder-shown
效果
效果可以参见下面的GIF示意：
现在这种设计在移动端很常见，因为宽度是稀缺的。相信不少人设计项目中有实现过这种交互，而且，我敢保证是利用JS实现的。
实际上，我们可以借助CSS :placeholder-shown伪类，纯CSS，无任何JS，实现这样的占位符交互效果。
:placeholder-shown表示，当输入框的placeholder内容显示的时候，输入框干嘛干嘛。
:placeholder-shown伪类目前兼容性如下：
兼容性还是很不错的，在移动端我们可以放心使用。因为就算一些老手机不支持，也不过是传统的placeholder占位符效果，并没有什么损失。
经典案例
下面展示使用几个:placeholder-shown实现label特性占位符案例。
输入内容功能布局效果也是正常的：
纯CSS实现，要比JS实现好一千倍，代码少，性能高，样式调整方便，上手简单容易，可谓是前端必备技能了。
实现原理
拿第一个fill模式的输入框举例，HTML结构如下：
首先，让浏览器默认的placeholder效果不可见，我们可以让颜色透明即可，如下CSS：
然后，后面的.input-label这个label元素代替成为我们肉眼看到的占位符。我们可以采用绝对定位：
最后，对这个label元素在输入框focus时候，以及非placeholder显示的时候进行重定位（缩小并位移到上方）：
于是，效果达成！
是不是要比JS写各种事件，判断各种场景简单多了？
赶快用起来吧
赶快项目中用起来吧！或者把这个技术分享给其他小伙伴吧~
其他
demo页面还使用了其他一些CSS3属性，例如，外部容器宽度是跟着输入框宽度走的，使用的是width:fit-content这个声明。
输入框focus时候有个边框动画效果，借助了:focus-within伪类选择器，:focus-within伪类选择器也是非常强非常实用以后会大火的选择器，如果不了解的一定要进行了解。
:placeholder-shown还可以实现下面的交互：输入框的后面（或下方）会有关于输入内容的说明和提示信息（因为很长，placeholder放不下），当用户输入内容，提示信息消失。
兼容性: IE10和egde下，填充模式惨不忍睹，其他无效果
关注公众号【grain先森】，回复关键词 【18福利】，获取为你准备的年终福利，更多关键词玩法期待你的探索~
