使用 HTML 和 CSS 创建浮动标签

📚 进一步阅读：

大家好👋，希望你们一切都好。

所以，今天我们将学习如何使用 HTML 和 CSS 创建浮动标签😎。

📄 HTML

让我们首先设置我们的 HTML。

<main>
  <form>
    <div>
      <input id="email" type="email" placeholder=" " />
      <label for="email">Email</label>
    </div>
    <div>
      <input id="password" type="password" placeholder=" " />
      <label for="password">Password</label>
    </div>
    <button>Login</button>
  </form>
</main>

🎨 CSS

现在，让我们设置我们的 CSS。

div {
  display: flex;
  flex-direction: column-reverse;
}

input {
  border: none;
  padding: 1rem;
  margin-top: 2rem;
  font-size: 1.6rem;
  border-bottom: 0.2rem solid #bdbdbd;
  outline: none;
}

label {
  padding-left: 1rem;
  color: #bdbdbd;
  transform: translateY(4.8rem);
  transform-origin: left top;
  cursor: text;
}

现在，让我们设置聚焦input时的功能。input

input:focus,
input:not(:placeholder-shown) {
  border-bottom: 0.2rem solid #212121;
}


input:focus ~ label,
input:not(:placeholder-shown) ~ label {
  padding: 0;
  color: #212121;
  transform: translateY(2rem) scale(0.8);
}

就是这样😎。

例子

📚 进一步阅读：

感谢阅读！我叫 Bipin Rajbhar；我喜欢帮助人们学习新技能😊。如果您想收到新文章和资源的通知，可以在Twitter上关注我。

文章来源：https://dev.to/bipinrajbhar/creating-a-floating-label-using-html-and-css-2edn