html - 当用户关注此时移动输入框的标签而不需要

Question

当用户关注输入框时，我想在输入框上方移动一个标签。 There is an answer here ，但是，还是有一些区别的。我无法使用 required 因为我正在使用自定义验证。另外，输入框不止一个。

请参阅下面的代码。我一定是漏掉了一些愚蠢的东西。

.field {
  position: relative;
  padding-top: 10px;
}

.form label {
  position: absolute;
  top: 8px;
  left: 10px;
  pointer-events: none;
}

input:focus ~ label {
  top: -6px;
}

<form class="form">

  <div class="field">
    <label>Name</label>
    <input type="text">
  </div>

  <div class="field">
    <label>Age</label>
    <input type="text">
  </div>

</form>

Answer 1

要仅使用 css 创建它，您需要更改 input 和 label 的顺序，以便您可以使用 + 选择器。然后，当您关注 input

时，您可以在 label 上使用 transform: translate()

form {
  display: inline-block;
}
.field {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
}
label {
  order: -1;
  padding-left: 5px;
  transition: all 0.3s ease-in;
  transform: translateY(20px);
  pointer-events: none;
}
input:focus + label {
  transform: translateY(-2px);
}

<form class="form">
  <div class="field">
    <input type="text">
    <label>Name</label>
  </div>

  <div class="field">
    <input type="text">
    <label>Age</label>
  </div>
</form>