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

【问题标题】：How do I style correctly a floating label to not stay on top of input field?如何正确设置浮动标签的样式以不停留在输入字段的顶部？
【发布时间】：2020-07-27 08:56:08
【问题描述】：

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

.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但是没用，输入的内容被标签覆盖了。

【问题讨论】：

你见过这个吗？ css-tricks.com/float-labels-css
@user3489433 我试过了，但它对我不起作用..这就是我来这里寻求帮助的原因

标签： css forms input label

【解决方案1】：

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

为了保持标签的悬停状态，必须确定input elememts 是否填充。我们可以使用javascript，给input元素添加一个属性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>

【讨论】：

对不起。我忘了添加到 html 代码中。我的原始代码中有一个 div 包装了该表单并具有 .form 类。
在这种情况下，保留原始 CSS 并在其中添加 form input[filled="true"]+label 部分。
已经做到了。稍作调整以使用我的 vue 组件。非常感谢

【解决方案2】：

在您的具体情况下，您可以使用 :valid 伪类在输入数据后保持标签浮动（您只能这样做，因为字段被标记为“必填”！！）

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

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

如果您希望能够对所有字段执行此操作，而不仅仅是必填字段，您必须使用 javascript 跟踪其中的值并相应地设置一个类，或者使用占位符使用一些“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）

【讨论】：