内容简介:byzhangxinxu from本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。Material Design风格占位符交互效果官方示意见此
byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8336
本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。
一、Material Design规范中占位符交互效果
Material Design风格占位符交互效果官方示意见此 demo页面 。
效果可以参见下面的GIF录屏示意:
现在这种设计在移动端很常见,因为宽度是稀缺的。相信不少人设计项目中有实现过这种交互,而且,我敢保证是利用JS实现的。
实际上,我们可以借助CSS :placeholder-shown伪类,纯CSS,无任何JS,实现这样的占位符交互效果。
:placeholder-shown表示,当输入框的placeholder内容显示的时候,输入框干嘛干嘛。
: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放不下),当用户输入内容,提示信息消失。
好,本文就说这么多,最后,祝大家圣诞快乐!
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址: https://www.zhangxinxu.com/wordpress/?p=8336
(本篇完)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 自定义占位文本(placeholder)的样式
- ios – 在文本字段中居中对齐占位符
- 利用「占位块」弥补 space-between 的不足
- Python:使用变量名称占位符格式化字符串
- go-Printf占位符(之后有时间整理成表格)
- CKEditor 4.15 发布:新增编辑器占位符插件和历史颜色
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。