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

在本文中，我们将介绍如何使用CSS，在输入框获得焦点时将占位符移动到输入框上方的方法。这个特效可以增加用户交互性和美观度，让用户更清楚地知道当前正在输入的内容。

阅读更多：CSS 教程

实现方法

要实现这个效果，我们可以使用CSS的伪类选择器和过渡效果。我们将通过:focus伪类选择器来控制输入框获得焦点时的样式变化，并使用translate属性来改变占位符的位置。下面是一个示例：

/* 添加外层容器 */
.input-container {
  position: relative;
  width: 300px;
}

/* 输入框样式 */
.input-container input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: border-color 0.3s;
}

/* 占位符样式 */
.input-container input::placeholder {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  opacity: 0.5;
  transition: all 0.3s;
}

/* 输入框获得焦点时的样式 */
.input-container input:focus {
  border-color: #000;
}

/* 输入框获得焦点时，占位符上移 */
.input-container input:focus::placeholder {
  transform: translateY(-150%);
  opacity: 1;
}

在上面的示例中，我们首先为输入框添加了一个外层容器，这样我们可以通过相对定位来控制占位符的位置。然后给输入框和占位符定义了相应的样式，例如设置输入框的宽度、边框等属性。占位符使用了绝对定位，并通过transform属性和过渡效果来实现移动的动画效果。

示例

我们可以使用上面的CSS代码，在页面中创建一个输入框，并添加相应的HTML：

<div class="input-container">
  <input type="text" placeholder="请输入内容"/>
</div>

通过在输入框上添加:focus伪类选择器和相应的CSS样式，我们可以在输入框获得焦点时将占位符移动到输入框上方。

兼容性考虑

在实现这个效果时，需要注意不同浏览器的兼容性。例如，Firefox浏览器对于placeholder属性的样式支持不完整，需要使用::-moz-placeholder伪类来定义样式。同时，部分移动设备的浏览器可能也存在一些兼容性问题，需要根据实际情况进行调整。

总结

在本文中，我们介绍了使用CSS来实现在输入框获得焦点时将占位符移动到输入框上方的方法。通过使用:focus伪类选择器和transform属性，我们可以轻松地实现这个效果。这个特效可以提高用户交互性和美观度，让用户更清楚地知道当前正在输入的内容。同时，在实现时需要考虑不同浏览器的兼容性，确保效果在各个平台上都能正常显示。希望本文对你有所帮助！