CSS 输入框获得焦点时将占位符移动到输入框上方

在本文中，我们将介绍如何使用CSS实现当输入框获得焦点时将占位符移动到输入框上方的效果。

阅读更多：CSS 教程

前提条件

在开始之前，我们需要确保了解以下知识点：

• HTML 基础知识：了解如何创建输入框，并设置其属性和样式。
• CSS 基础知识：了解如何选择元素并设置其样式属性。

实现方法

要实现将占位符移动到输入框上方的效果，我们可以使用CSS选择器和伪类来设置输入框的样式。下面是一种常见的实现方法：

.input-container {
  position: relative;
}

.input-container input:focus + .placeholder {
  transform: translateY(-100%);
  color: #999;
}

.input-container .placeholder {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

以上代码中，我们首先创建一个包含输入框和占位符的容器，并使用相对定位将其定位在正确的位置。然后，为输入框设置一个伪类选择器 :focus，这样当输入框获得焦点时，我们就可以通过 + 相邻选择器选择输入框后面的占位符元素，并设置其样式。

在样式中，我们使用 transform: translateY(-100%) 将占位符向上移动，并使用 color: #999 改变其颜色以表示非激活状态。同时，我们为占位符设置了绝对定位，使其能够准确地定位在输入框上方。

此外，我们还为占位符添加了过渡效果，使其在移动时能够平滑过渡。

示例

让我们通过一个示例来看看如何实现这个效果。

<div class="input-container">
  <input type="text" placeholder="请输入用户名">
  <span class="placeholder">用户名</span>
</div>

在上面的示例中，我们创建了一个包含用户名输入框和占位符的容器。输入框使用了 type="text" 属性，并设置了占位符为 “请输入用户名”。占位符使用了 class="placeholder" 属性，我们将在CSS中为其设置样式。

现在，将上面提供的CSS代码添加到你的CSS文件中，并将其链接到HTML文件中。然后，你就可以在你的浏览器中查看结果了。当你点击输入框并将其获得焦点时，你将看到占位符向上移动到输入框的上方。

总结

通过使用CSS选择器和伪类，我们可以轻松实现将占位符移动到输入框上方的效果。只需要为输入框和占位符设置正确的样式，我们就可以让用户在输入时更清晰地了解需要输入的内容。

希望本文对你理解和运用CSS来实现输入框效果有所帮助。祝你编写出漂亮且易用的表单！