让我们仅使用 HTML 和 CSS 创建一个浮动标签输入

浮动标签输入是一种将输入标签和输入框本身在视觉上合并为一个元素的元素。当输入框获得焦点或包含内容时，标签会从占位符模式切换为标签模式。这一概念由Matt D. Smith于 2013 年首次提出，自此便成为一种广泛使用的模式，甚至成为 Google Material Design 的标准元素。

这种模式至今仍在使用，原因如下：

节省空间
看起来很干净，使扫描表格更容易
流畅的过渡效果看起来很棒
无障碍

但开发人员和设计师也需要注意以下几点：

不能同时使用标签和占位符 - 标签也代替了占位符。
浏览器支持 - 根据实现情况，您需要使用 Javascript（性能问题、JS 依赖性等）或更现代的 CSS（不支持 Edge 和 IE 浏览器）。
标签在输入焦点时会变小，如果它有值 - 它会更难阅读。

要求和规范

在此示例中，我们将不使用 JavaScript 来实现此输入，而是使用现代 CSS 语法。这意味着 Edge 和 Internet Explorer 浏览器将无法完全支持其视觉功能和过渡效果，但仍可使用。

我们的实施将遵循针对高质量用户体验进行优化并基于用户研究的设计。

过渡（动画）需要流畅，并尽可能利用硬件加速。

我们还希望使输入变得可访问并保留本机选项卡导航。

可访问的标记



  <div class="floating">
    <input id="inputId" class="floating__input" name="input name" placeholder="Placeholder" />
    <label for="inputId" class="floating__label" data-content="Placeholder">
      <span class="hidden--visually">Placeholder</span>
    </label>
  </div>

我们将使用一个包装元素<div class="floating">，将输入框和标签框组合到一个容器中，并处理输入框之间的间距。包装元素并非必需，但它可以简化组的样式设置。

我们还使用了来实现元素的无障碍隐藏<span class="hidden--visually">。我在之前的一篇文章中介绍过这种隐藏元素的方法。

可访问性：在 CSS 中隐藏内容

Adrian Bece・19年8月1日

#a11y #css #html #codenewbie

造型

为这个元素设置样式所需的代码大约有 80-95 行，因此我决定只重点解释一些比较复杂的具体部分。完整的 HTML 和 CSS 代码可以在下面的 Codepen 示例中查看。

样式实现细节：

我们使用:placeholder-shownCSS 选择器和placeholderHTML 属性让浏览器执行检测何时应将标签调整为较小尺寸或以全尺寸显示的逻辑
我们正在使用 CSS 变量轻松更改配色方案
我们使用:focusCSS 选择器来允许键盘选项卡交互以及常规点击（或触摸）交互

CSS 的过渡和动画需要流畅，因此我们将使用translate3d和来为动画scale3d添加硬件加速top支持。大多数其他纯 CSS 解决方案都使用绝对位置 CSS 属性（例如和）left来实现过渡，而这些属性由于性能不佳而需要避免使用。我在之前的一篇文章中更深入地讨论过这个主题。