有没有人有好的浮动标签？答案

【问题标题】：Does anyone have a good floating lable?有没有人有好的浮动标签？
【发布时间】：2020-03-05 05:34:36
【问题描述】：

不久前，我发现了 this 浮动标签，此后我一直在寻找类似的工作标签。

我尝试了一对看起来不错并且一开始似乎工作得很好，但结果他们有自己的问题，比如他们要么需要具有必需的属性，否则他们的标签看起来就像一个普通标签，或者当输入的类型是电子邮件时，标签会返回。

所以我想知道是否有人有一个我可以使用的好的替代品。

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： javascript css label placeholder floating-labels

【解决方案1】：

材质设计有一个不错的浮动标签选项。你可以在这里测试一下。 https://material.io/components/text-fields/

【讨论】：

【解决方案2】：

我为你创建了一个快速的 sn-p。您可以相应地调整它。希望对您有所帮助。

通过一些过渡和绝对定位的标签，我们可以达到这个效果。

如果你有任何问题，请联系我；）

.input-wrapper {
  position: relative;
}

.input-wrapper .input {
  padding: 8px;

  border: 0;
  border-bottom: 1px solid #aaa;
  outline: 0;
  transition: all .15s ease-out;
}

.input-wrapper .input:hover {
  border-bottom-color: #444;
}

.input-wrapper .input:focus {
  border-bottom-color: #6200EE;
}

.input-wrapper .input:focus + .label,
.input-wrapper .input:valid + .label {
  top: -8px;
  left: 4px;
}

.input-wrapper .label {
  position: absolute;
  left: 8px;
  top: 10px;

  padding: 0 4px;
  background-color: #fff;

  font-size: 14px;
  line-height: 1;

  color: #444;

  transition: all .15s ease-out;
}

<div class="input-wrapper">
  <input class="input" type="text" id="username" required>
  <label class="label" for="username">Label</label>
</div>

【讨论】：

这个看起来是我想要的样子，但是在你点击离开后它又变回了。
这只是一个简单的示例，您可以使用例如 JavaScript 来实现效果。我调整了 sn-p 以获得您想要的效果，但仅使用 CSS。
感谢编辑！原来我在使用“输入类型电子邮件”时遇到的问题是，当您输入无效的电子邮件（例如，只是一个字符串）时，标签会再次下降，但是当它是普通电子邮件时它会起作用。你有没有办法解决这个问题？
您可以使用 javascript 监听更改事件并检查值。如果值长度大于 0，则向 input-wrapper 添加一个类来处理标签位置
显然这个答案被否决了，任何人都可以评论否决票？