如何正确设置浮动标签的样式以使其不停留在输入字段的顶部？

Question

我正在尝试制作一个浮动标签输入表单。不知道怎么命名。

.form input,
label {
  transition: all 500ms;
  touch-action: manipulation;
}

.form input {
  border: none;
  border-bottom: 1px solid #ddd;
  height: 1.5em;
  margin: 0.5em 0;
  width: 100%;
}

.form label {
  display: block;
  transform-origin: left bottom;
  transform: translate(1.5em, -2em);
}

.form input:focus {
  border: none;
  outline-width: 0;
  border-bottom: 1px solid #5fa8d3;
}

.form input:focus+label {
  transform: translate(0, -3.4em);
}

<form action="get" class="login-form">
  <h1>Log In</h1>
  <input type="text" name="username" id="username" autocomplete="none" required />
  <label for="username">Username:</label>
  <input type="password" name="password" id="password" required />
  <label for="password">Password:</label>
</form>

我也试过在.form input:focus + label上加overflow: hidden但是没用，输入的内容被标签覆盖了。

Answer 1

您在 css 中的 form 之前添加了 . 标记，.form 的名称中没有 class。如果你想将它应用到 form 元素上，那么在没有 . 选择器的情况下使用它。

并且要保持标签的悬停状态，必须确定 input 元素是否已填充。我们可以使用 javascript 并在输入元素中添加一个属性 filled=true 如果它已填充并在它为空时删除

document.addEventListener('input', function(event) {
  if (event.target.nodeName && event.target.nodeName === "INPUT") {
    if (event.target.value) {
      event.target.setAttribute('filled', 'true')
    } else {
      event.target.removeAttribute('filled')

    }
  }
})

form input,
label {
  transition: all 500ms;
  touch-action: manipulation;
}

form input {
  border: none;
  border-bottom: 1px solid #ddd;
  height: 1.5em;
  margin: 0.5em 0;
  width: 100%;
}

form label {
  display: block;
  transform-origin: left bottom;
  transform: translate(1.5em, -2em);
}

form input:focus {
  border: none;
  outline-width: 0;
  border-bottom: 1px solid #5fa8d3;
}

form input:focus+label {
  transform: translate(0, -3.4em);
}

form input[filled="true"]+label {
  transform: translate(0, -3.4em);
}

<form action="get" class="login-form">
  <h1>Log In</h1>
  <input type="text" name="username" id="username" autocomplete="none" required />
  <label for="username">Username:</label>
  <input type="password" name="password" id="password" required />
  <label for="password">Password:</label>
</form>

Answer 2

在您的特定情况下，您可以使用 :valid 伪 class 在输入数据后使标签保持浮动（您只能这样做，因为字段被标记为 'required' ！ !)

.login-form input:focus+label
.login-form input:valid+label {
  transform: translate(0, -3.4em);
}

（旁注：您的原始代码说 .form 但我想您的意思是 .login-form ？）

如果您希望能够对所有字段执行此操作，而不仅仅是必填字段，您要么必须使用 javascript 跟踪其中的值并相应地设置 class，或者使用使用占位符的 'hack' 位：

  <input type="password" name="password" id="password" placeholder=" " />
  <label for="password">Password:</label>

form input:not(:placeholder-shown) + label
form input:not(:-ms-input-placeholder) + label {
  transform: translate(0, -3.4em);
}

（如果您不需要 IE 支持，您可以省略 :-ms-input-placeholder）

如何正确设置浮动标签的样式以使其不停留在输入字段的顶部？

How do I style correctly a floating label to not stay on top of input field?

css

forms

label

input