Re-CSS-placeholder-shown伪类实现MaterialDesign占位交互

首先，让浏览器默认的占位符效果不可见，我们可以让颜色透明，如下CSS:/Thedefaultplaceholdercoloristransparentandinvisible/.input-fill:placeholder-shown::placeholder{color:transparent;}.input-fill{margin:0;字体大小：16px；行高：1.5；大纲：无；填充：20px16px6px；#f5f5fa;边框半径：10px；transition:border-color.25s;}然后，label元素.input-label会被我们肉眼看到的placeholder代替。我们可以使用绝对定位：.input-fill-box{position:relative;}.input-label{position:absolute;左：16px；顶部：14px；指针事件：无；颜色：#BEC1D9；填充：02px；transform-origin:00;}最后，当输入框处于焦点中并且非占位符显示时（缩小并移动到顶部）重新定位标签元素：.input-fill:not(:placeholder-shown)~.input-label,.input-fill:focus~.input-label{transform:scale(0.75)translate(0,-14px);}.input-fill:focus{border-color:#283282;}4clearbutton1.html部分input上的required属性是必须的属性，用CSS伪类就可以实现我们的效果。close2.CSS部分使用了:valid伪类。这是CSS3中新增的伪类，IE10+等现代浏览器都支持，说明表单是合法的。由于HTML中的具有所需的HTML5表单验证属性。因此，如果文本框没有内容，则无效；如果有内容就是合法的，这里的:valid伪类选择器就会被触发。而这里：有效伪类控件后面的清除按钮的显示，这样就达到了我们想要的效果。是啊。IE11下不是所有的文本框都有黑叉，会和这里的自定义清除按钮重叠，::-ms-clear{display:none;}这段代码可以去~~.clear{position:absolute;顶部：10px；右：-20px；显示：无；转换：所有.25s；}.input-fill::-ms-clear{显示：无；}.input-fill:valid+.clear{显示：内联；}.input-fill:not(:focus)+.clear{显示：无；}3。实现的优点这种方法比传统的JS实现简单。对于JS来说，还需要监听输入事件（input）等，比较郁闷。CSS完全是浏览器自己的事件特性，显然，它更加高效和简单。4.实现的缺点在于兼容性。IE9以下浏览器只能点蜡烛。然而，编写原型、演示；或使用渐进增强；或者移动端开发等，可以试试这个新技能。