前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第 013 期 优化移动端输入框占位符的交互体验 - CSS :placeholder-shown

第 013 期 优化移动端输入框占位符的交互体验 - CSS :placeholder-shown

作者头像
前端GoGoGo
发布2021-04-13 16:15:35
1.1K0
发布2021-04-13 16:15:35
举报
文章被收录于专栏:九彩拼盘的叨叨叨

在移动端,如果标签和输入框在一行中显示,显示的有点窄。

如果标签和输入框各占一行显示,又浪费空间。有没有两全其美的方案呢?

Material Design 提供了一个两全其美的方案。输入框没有值时,标签在输入框中显示。在输入框中有值或获得焦点时,标签在上方显示。如下图所示:

解决方案

可以用 CSS 的 :placeholder-shown 伪类可以实现上面的效果。:placeholder-shown 作用于显示占位符时的元素。输入框在有值或获得焦点时,不显示占位符,可以用选择器 :not(:placeholder-shown) 匹配。下面是具体是实现:

HTML 结构:

代码语言:javascript
复制
<div class="input-fill-x">
    <input class="input-fill" placeholder="name">
    <label class="input-label">name</label>
</div>

第 1 步 隐藏浏览器默认的 placeholder

代码语言:javascript
复制
.input-fill:placeholder-shown::placeholder {
    color: transparent;
}

第 2 步 设置: 输入框显示占位符时的样式。

代码语言:javascript
复制
.input-fill-x {
    position: relative;
}
.input-label {
    position: absolute;
    left: 16px; top: 14px;
    pointer-events: none;
}

第 3 步 设置: 输入框不显示占位符(即获得焦点或有值)时的样式。

代码语言:javascript
复制
.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
    transform: scale(0.75) translate(0, -32px);
}

完成~

:placeholder-shown 的兼容性很好。

Can I Use

在项目中用起来吧~

觉得本文对你有帮助。点个赞,分享给小伙伴们吧~

参考文档

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解决方案
  • 参考文档
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档