placeholder-shown伪类实现MaterialDesign占位符的交互效果
时间：2023-03-31 11:29:38
CSS
1.MaterialDesign规范中占位符的交互效果MaterialDesign风格占位符的交互效果可以参考这个demo页面。效果可以看下面这张GIF录屏图：现在这种设计在移动端很常见，因为宽度很稀缺。相信很多人在设计项目中都实现过这种交互，我敢保证是用JS实现的。其实我们可以使用CSS:placeholder-shown伪类，纯CSS，不带任何JS，来实现这样的占位交互效果。:placeholder-shown表示当显示输入框的占位符内容时，输入框做什么。:placeholder-shown伪类目前的兼容性如下：兼容性还是很好的，我们可以放心的在移动端使用。因为即使有些老手机不支持，也只是传统的占位符效果，并没有什么损失。2.:placeholder-shown的经典案例使用了几个:placeholder-shown来实现标签特征的占位符案例。下面是我实现的demo页面效果图（GIF动图）：输入内容功能也是，布局效果正常：纯CSS实现比JS实现好千倍，代码少，性能高，和简单的风格调整。简单易上手，可以说是前端必备技能。实现原理以第一种填充方式的输入框为例，HTML结构如下：Mailbox
首先让浏览器默认的占位符效果不可见，我们可以让颜色透明，如下CSS:/*默认占位符颜色透明不可见*/.input-fill:placeholder-shown::placeholder{color:transparent;}然后，label元素.input-label会替换我们肉眼看到的placeholder。我们可以使用绝对定位：.input-fill-x{position:relative;}.input-label{position:absolute;左：16px；顶部：14px；pointer-events:none;}最后，对于input中的label元素当框获得焦点，并且显示非占位符时，重新定位（收缩并移动到顶部）：.input-fill:not(:placeholder-shown)~.input-label,.input-fill:focus~.input-label{transform:scale(0.75)translate(0,-32px);}这样，效果就实现了！写各种事件，判断各种场景，是不是比JS更容易？3.赶快在项目中使用吧！赶快在项目中使用吧！或者把这个技巧分享给其他朋友~其他的demo页面也使用了一些其他的CSS3属性。例如，外部容器的宽度跟随输入框的宽度，使用width:fit-content]的声明。输入框获得焦点时有边框动画效果，借助于:focus-within伪类选择器，:focus-within伪类选择器也是一个非常强大实用的选择器，将在未来。如果您不了解它，则必须了解它。:placeholder-shown还可以实现如下交互：在输入框后面（或下方），会有输入内容的说明和提示信息（因为很长，占位符放不下），当用户输入内容，提示信息消失。
