强大的CSS：placeholder-shown伪类实现Material Design占位符交互效果

一、Material Design规范中占位符交互效果

Material Design风格占位符交互效果官方示意见此demo页面。

效果可以参见下面的GIF录屏示意：

现在这种设计在手机端很常见，由于宽度是稀缺的。相信不少人设计项目中有实现过这种交互，而且，我敢保证是利用JS实现的。

实际上，我们可以借助CSS :placeholder-shown伪类，纯CSS，无任何JS，实现这样的占位符交互效果。

:placeholder-shown表示，当输入框的placeholder内容显示的时候，输入框干嘛干嘛。

:placeholder-shown伪类目前兼容性如下：

兼容性还是很不错的，在手机端我们可以放心使用。由于就算少量老手机不支持，也不过是传统的placeholder占位符效果，并没有什么损失。

二、:placeholder-shown经典案例

展现使用几个:placeholder-shown实现label特性占位符案例。

下面就是我实现的demo页面中的效果图（GIF动图）：

输入内容功能也是布局效果也是正常的：

纯CSS实现，要比JS实现好一千倍，代码少，性能高，样式调整方便，上手简单容易，可谓是前台必备技能了。

实现原理

拿第一个fill模式的输入框举例，HTML结构如下：

<div class="input-fill-x">    <input class="input-fill" placeholder="邮箱">    <label class="input-label">邮箱</label></div>

首先，让浏览器默认的placeholder效果不可见，我们可以让颜色透明就可，如下CSS：

/* 默认placeholder颜色透明不可见 */.input-fill:placeholder-shown::placeholder {    color: transparent;}

而后，后面的.input-label这个label元素代替成为我们肉眼看到的占位符。我们可以采用绝对定位：

.input-fill-x {    position: relative;}.input-label {    position: absolute;    left: 16px; top: 14px;    pointer-events: none;}

最后，对这个label元素在输入框focus时候，以及非placeholder显示的时候进行重定位（缩小并位移到上方）：

.input-fill:not(:placeholder-shown) ~ .input-label,.input-fill:focus ~ .input-label {    transform: scale(0.75) translate(0, -32px);}

于是，效果达成！

是不是要比JS写各种事件，判断各种场景简单多了？

三、赶快项目中用起来吧

赶快项目中用起来吧！或者者把这个技术分享给其余小伙伴吧~

其余

• demo页面还使用了其余少量CSS3属性，例如，外部容器宽度是跟着输入框宽度走的，使用的是width:fit-content]这个公告。
• 输入框focus时候有个边框动画效果，借助了:focus-within伪类选择器，:focus-within伪类选择器也是非常强非常实用以后会大火的选择器，假如不理解的肯定要进行理解。
• :placeholder-shown还可以实现下面的交互：输入框的后面（或者下方）会有关于输入内容的说明和提醒信息（由于很长，placeholder放不下），当客户输入内容，提醒信息消失。

自己是一个五年的前台工程师,希望本文对你有帮助！

这里推荐一下我的前台学习交流扣qun：731771211 ，里面都是学习前台的，假如你想制作酷炫的网页，想学习编程。自己整理了一份2019最全面前台学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到手机端HTML5的项目实战的学习资料都有整理，送给每一位前台小伙伴，每天分享技术

点击：加入