仅使用 CSS 实现浮动标签,使用 :placeholder-shown 伪类

Avatar of Robin Rendle
Robin Rendle

DigitalOcean 为您的每个旅程阶段提供云产品。 立即开始使用 $200 免费积分!

浮动标签技术已经存在了一段时间了 很久了,基本思路是:我们有一个文本输入框,使用 placeholder 属性作为标签。当用户在该输入框中键入内容时,标签会从输入框内部移动到外部。

就是这样

虽然我没有看到这种模式在网络上被广泛使用,但我认为它很有趣! 有不同的方法,但 Nick Salloum 描述了一种使用 :not :placeholder-shown 组合的新方法。

这种 UI 技术确实稍微改变了上面列出的标签和占位符的定义,从某种意义上说,我们赋予占位符更多的初始重要性,需要向用户解释输入,但这是一种权衡,可以获得一个简洁的 UI 组件,而且我个人也乐于接受这种权衡。

我想知道 :not :placeholder-shown 是否还有其他奇特的使用方法。

直接链接 →