当用户不需要此操作时，移动输入框的标签 [英] Move label of input box when a user focuses on this without require

问题描述

当用户专注于输入框时，我想在输入框上方移动标签.这里有一个答案，但是有一些区别.我无法使用必填项，因为我正在使用自定义验证.另外，输入框不止一个.

I want to move a label above an input box when a user focuses on the input box. There is an answer here, however, there are some differences. I can't use required as I am using custom validations. Also, there is more than one input box.

请参阅下面的代码.我一定很想念一些愚蠢的东西.

See my code below. I must be missing something silly.

.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>

推荐答案

要仅使用CSS创建此代码，您需要更改 input 和 label 的顺序，以便使用 + 选择器.然后，当您重点关注 input

To create this with just css you need to change order of input and label so you can use + selector. Then you can use transform: translate() on label when you focus input

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>

这篇关于当用户不需要此操作时，移动输入框的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！