【译】利用:placeholder-shown选择器实现label浮动效果_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了【译】利用:placeholder-shown选择器实现label浮动效果_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3208字，纯文字阅读大概需要5分钟。
内容图文
设计师似乎喜欢用 浮动 label 模式来设计华丽的效果，虽然我不确定我是否百分百喜欢这种方式，但我忍不住快速实现了一个这样的 demo。这个版本用上了一些我最近才看见的现代 CSS 表单样式技巧，特别是 :placeholder-shown选择器。 先说重点：不管从形状或者形式上，这都 不是一种最佳实践。这个 demo 的实现适用于某些浏览器的较新版本 - 尤其是 Chrome/Opera 和 Safari/WebKit。但它在 Firefox 上运行得一塌糊涂。要注意了，我可几乎没有测试过它。
我主要是参考了下面这些技巧来实现该效果的：
- Flexbox — 借助 Hugo Giraudel 的示例代码，在 HTML 中，把 label 放在了 input 之后，并通过 CSS 颠倒其显示顺序。
- 使用 transform属性，把 label 移至 input 之上。当 input 处于激活状态的时候，placeholder 的文字被设置为 opacity: 0，也就是透明，这样 label 和 placeholder 的文本不会重叠。
- 当 placeholder 不显示，比如表单域被填充或者获得焦点的时候，才把 label 上移，这里我是受到了 Jeremy 关于 ”Pseudon’t” 的文章启发。
最后一点正是将我这个实现与 Chris Coyier和 Jonathan Snook的示例区分开来的地方，后两者均使用了 :valid伪类。我认爲我这个 demo 背后有特定的局限性，但正如我一开始所讲，对于浏览器支持总是会有限制的。
译注： :placeholder-shown属于尚未发行的 CSS4 规范，查询 Can I Use可以得知，迄今为止只有 Chrome (>=47)、Safari (>=9)、Opera (>=35)、Android Browser (>=47) 和 Chrome for Android (>=47) 这五种浏览器支持 :placeholder-shown伪类。作者在这里提及的局限性应该就是指浏览器对 :placeholder-shown的支持度。
这个版本改用了 :placeholder-shown伪类，但不仅仅是在 placeholder 文本不显示时移动 label 的位置 - 在该模型预设的工作方式中 :placeholder-shown伪类发挥着很好的作用。
这里是相关 HTML 代码：
...以及 CSS 代码：
/*** 把区域设置为 flex 容器，并逆序排列，使得 label 标签显示在上方*/.field { display: flex; flex-flow: column-reverse;}/*** 给 label 和 input 设置一个过渡属性*/label, input { transition: all 0.2s;}input { font-size: 1.5em; border: 0; border-bottom: 1px solid #ccc;}/*** 设置 input 获得焦点时的边框样式*/input:focus { outline: 0; border-bottom: 1px solid #666;}/*** 1\. 标签应保持在一行内，并最多占据字段 2/3 的长度，以确保其比例合适且不会出现换行。* 2\. 修正光标形状，使用户知道这里可以输入.* 3\. 把标签往下平移并放大1.5倍，使其覆盖 placeholder 层.*/label { /* [1] */ max-width: 66.66%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* |2] */ cursor: text; /* [3 */ transform-origin: left bottom; transform: translate(0, 2.125rem) scale(1.5);}/*** 默认情况下，placeholder 应该是透明的，并且应该继承 transition 属性。*/::-webkit-input-placeholder { transition: inherit; opacity: 0;}/*** 在 input 获得焦点时，显示 placeholder 内容。*/input:focus::-webkit-input-placeholder { opacity: 1;}/*** 1\. 当元素获取焦点时，还原 transform 效果，把 label 移回原来的位置。* 并且，当 placeholder 不显示，比如用户已经输入了内容时，也作同样处理。* 2\. ...并把光标设置为指针形状。*/input:not(:placeholder-shown) + label,input:focus + label { transform: translate(0, 0) scale(1); /* [1] */ cursor: pointer; /* [2] */} 2016-01-26 更新: 我更新了 label 的选择器，以便其对应的 input 标签拥有 :placeholder-shown 伪类时，才使用 label 的 transform 效果。那样的话，不支持的浏览器就回退到 “正常模式” ，也就是标签显示在 input 上方。
点这里查看 JSBin 演示.
内容总结
以上是互联网集市为您收集整理的【译】利用:placeholder-shown选择器实现label浮动效果_html/css_WEB-ITnose全部内容，希望文章能够帮你解决【译】利用:placeholder-shown选择器实现label浮动效果_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。