【译】利用:placeholder-shown选择器实现label浮动效果_html/css_WEB

设计师似乎喜欢用 浮动 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 代码：

          Name

      
查看更多关于【译】利用:placeholder-shown选择器实现label浮动效果_html/css_WEB的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did111306