使用 HTML/CSS 实现浮动输入占位符

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

这里有一个很棒的方法，可以让占位符在输入框获得焦点时“变成”标签。

这是最终成品的一支笔。

首先，你需要在 HTML 代码中将<a> 放在label<code> 标签之后。input

<form action="">
  <input type="text" id="fullName" name="fullName">
  <label for="fullName">Full Name</label>
</form>

这将确保我们能够label使用 CSS 定位目标对象。

然后，我们不再直接在 HTML 中放置 `<a>` 标签input，而是使用我们自定义的 ` <a>` 标签作为占位符。为了让 `<a>` 标签位于 `<div> ` 标签内，我们可以使用 ` <div>` 标签。我们还可以使用较浅的颜色，使其看起来更像一个原生占位符。placeholderlabellabelinputtransform: translate()

以下是初始状态的相关 CSS（翻译中使用的值会根据字体大小、位置等而有所不同）。

    label {
      color: #999;
      transform: translate(0.25rem, -1.5rem);
      transition: all 0.2s ease-out;
    }

现在，要使它在获得焦点时位于文本上方input，请使用以下方法。

    input:focus + label {
      color: #111;
      transform: translate(0, -2.75rem);
    }

有用！

但我们仍然面临一个问题。这些样式仅在元素获得焦点label时生效input。这意味着，如果您在元素上输入内容，input然后将焦点转移到其他地方，元素label将返回到其原始位置。

为了解决这个问题，我们需要使用选择器。这个选择器允许我们在`<div>` 标签显示:placeholder-shown时设置元素的样式。在我们的例子中，我们实际上希望在 `<div>`标签不显示时设置其样式，所以我们也需要使用`<div>` 选择器。最后，为了使这个方法生效，`<div>`标签必须包含一个占位符。由于我们希望使用 `<div>` 标签作为文本，我们可以简单地将一个空格作为其值（空字符串无效）。inputplaceholderlabelplaceholder:not()inputlabelplaceholderplaceholder""

<form action="">
  <input type="text" id="fullName" name="fullName" placeholder=" ">
  <label for="fullName">Full Name</label>
</form>

    input:focus + label,
    input:not(:placeholder-shown) + label  {
      color: #111;
      transform: translate(0, -2.75rem);
    }

现在一切都按我们预想的那样运转了。

这个:placeholder-shown选择器比较新，但浏览器支持相当不错。唯一无法识别它的浏览器是 Edge。为了解决这个问题，我们可以使用@supports查询技巧来检查代码是否在 Edge 中运行（你可以在http://browserhacks.com/找到更多类似的技巧）。

通常，这种技巧用于编写仅在 Edge 浏览器中支持的代码。由于我们需要的是相反的效果，因此可以not在查询条件前面添加相应的语句。

我们还应该将最终位置应用于label所有其他属性之前。这样，Edge 浏览器会将标签像普通表单一样显示在输入框上方，而其他浏览器则会应用“占位符”样式。

label {
  display: block;
  transform: translate(0, -2.75rem);
}

@supports (not (-ms-ime-align:auto)) {
    label {
      color: #999;
      transform: translate(0.25rem, -1.5rem);
      transition: all 0.2s ease-out;
    }

    input:focus + label,
    input:not(:placeholder-shown) + label {
      color: #111;
      transform: translate(0, -2.75rem);
    }
}

这种炫酷表单样式的另一种实现方式是，仅在用户输入内容时才移动元素label。为此，只需移除input:focus + label选择器即可。效果如下。

希望这篇文章对您有所帮助！请在评论区告诉我您的想法。