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

栏目: CSS · 发布时间: 5年前

内容简介:byzhangxinxu from本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。Material Design风格占位符交互效果官方示意见此

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8336

本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。

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

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

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

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

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

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

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

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

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

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

二、:placeholder-shown经典案例

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

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

下面就是我实现的demo页面中的效果图(GIF动图):

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

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

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

纯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放不下),当用户输入内容,提示信息消失。

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

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

本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

本文地址: https://www.zhangxinxu.com/wordpress/?p=8336

(本篇完)


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Learning JavaScript

Learning JavaScript

Shelley Powers / Oreilly & Associates Inc / 2006-10-17 / $29.99

As web browsers have become more capable and standards compliant, JavaScript has grown in prominence. JavaScript lets designers add sparkle and life to web pages, while more complex JavaScript has led......一起来看看 《Learning JavaScript》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具