Material Design规范中占位符交互效果是这样的：focus输入框的时候，placeholder会位移到左上角作为一个label存在。以前我们要实现这种效果只能借助JavaScript，实际上，纯CSS就能搞定之，就是借助:placeholder-shown伪类实现。且目前在移动端兼容性不错，可以在实际项目中应用。究竟如何实现？有没有这么神奇？一起进来看看吧~
文章关键字 ‘占位符’
CSS :placeholder-shown伪类实现Material Design占位符交互效果
2018年12月25日，星期二HTML5 placeholder实际应用经验分享及拓展
2012年02月6日，星期一
目前，现代浏览器均早已支持placeholder占位符属性。好定西不用白不用啊，因此，在前年，我就将HTML5的placeholder占位符属性应用在实际项目中了。在这一年多的应用中，还是有些磕磕碰碰，在此作为经验分享下。一来加深大家与placeholder的认识，二是希望大家可以积极大胆应用一些HTML5的新特性。
然后，还要对占位符的一些应用做扩展。本文是个排得上位置的长篇，内容多而杂，不过demo啊，截图啊，实例的，代码的都很详尽，内容也都是些值得话时间咀嚼的东西…… 相信会对您的学习有所帮助的。
我的应用
我的应用