更多精彩内容请关注 https://github.com/abc-club/free-resources 背景 话不多说，我们能否用纯css实现以下效果: 答案是肯定的。 借助css:placeholder-shown :valid :invalid伪类及html5 input pattern 属性就可以实现 :placeholder-shown伪类目前兼容性如下： :placeholder-shown兼容性 直接上代码！:smiling_face_selector: 源码 html: