【译】利用 :placeholder-shown 选择器实现 label 浮动效果_html/css_WEB-ITnose
设计师似乎喜欢用 浮动 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 代码：
<div> <input type="text" placeholder="Jane Appleseed"> <label for="fullname">Name</label></div>
...以及 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 演示.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
