Question

当用户专注于输入框时，我想在输入框上方移动标签。但是，There is an answer here存在一些差异。我无法使用必需的，因为我正在使用自定义验证。此外，还有多个输入框。

请参阅下面的代码。我一定是在傻傻丢失。

＆＃13;

.field {
  position: relative;
  padding-top: 10px;
}

.form label {
  position: absolute;
  top: 8px;
  left: 10px;
  pointer-events: none;
}

input:focus ~ label {
  top: -6px;
}

＆＃13;

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

＆＃13;

Answer 1

要仅使用css创建此内容，您需要更改input和label的顺序，以便使用+选择器。然后，当您关注transform: translate()

时，您可以在label上使用input

＆＃13;

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);
}

＆＃13;

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

＆＃13;

当用户专注于此而不需要

1 个答案: