CSS :placeholder-shown伪类实现Material Design占位符交互效果

这篇文章发布于 2018年12月25日,星期二,00:24,归类于 CSS相关。 阅读 26292 次, 今日 13 次 20 条评论

 

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

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

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

Material Design占位符交互截屏示意

现在这种设计在移动端很常见,因为宽度是稀缺的。相信不少人设计项目中有实现过这种交互,而且,我敢保证是利用JS实现的。

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

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

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

:placeholder-shown兼容性截图

兼容性还是很不错的,在移动端我们可以放心使用。因为就算一些老手机不支持,也不过是传统的placeholder占位符效果,并没有什么损失。

二、:placeholder-shown经典案例

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

你可以狠狠地点击这里::placeholder-shown实现占位符过渡动画demo

下面就是我实现的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放不下),当用户输入内容,提示信息消失。

好,本文就说这么多,最后,祝大家圣诞快乐!

(本篇完)

分享到:


发表评论(目前20 条评论)

  1. select说道:

    select 可不可以 这样做

  2. 123说道:

    在文章的代码截图里,感觉生效的是.focus伪类,而不是placeholder-show,因为placeholder一直都是透明颜色,即不可见。换句话说,这个类完全没发挥作用啊

  3. yekon说道:

    把demo放在小程序上面,就wxss报错了,提示unexpected token ‘’~” … ,但是网页上没有报错,我试了一下 小程序的wxss 是支持~选择器,不知道具体报错的原因

  4. yekon说道:

    我把代码拷到小程序上面css层就报错呢?

  5. hoythan说道:

    用 active 也可以实现,不需要js。

  6. foolsewar说道:

    没事儿就逛逛大手们的博客,感觉自己又飞升了

  7. maczyt说道:

    请教下,为何要加placholder?

    我把placeholder属性去掉,同时css中.input-control:not(:placeholder-shown) ~ .input-label也去掉同样也可以实现。

    • 张 鑫旭说道:

      无障碍访问需要哟~

    • 你把问题想明白好吗?说道:

      这篇文章是说的占位符,不是简简单单的动画实现效果。当输入框里面有值的时候,placeholder- shown不会将label放回原来的位置,如果不加这个属性,就算有值label也会回到之前的位置,这时候还要单独的去使用js去判断吗?老铁活明白吧!!!!

  8. zky说道:

    “我所知道的几种display:table-cell的应用” 这篇文章不能访问了,返回403

  9. Charlie说道:

    IE下输入的时候,输入框前面会被定位的label挡住

  10. shoyuf说道:

    可以可以。。。。

  11. 橘喵说道:

    学习中……谢谢大佬,圣诞快乐

  12. Oerrite说道:

    IE下惨不忍睹