实现输入框填充后标签保持在顶部的教程-html教程-PHP中文网

实现输入框填充后标签保持在顶部的教程

DDD

发布： 2025-12-03 11:29:01

原创

386人浏览过

实现输入框填充后标签保持在顶部的教程

本教程详细介绍了如何使用 css 实现一个常见的 ui 模式：当用户在输入框中输入内容后，对应的标签（label）能从输入框内部平滑地移动到输入框上方并保持在该位置。文章将通过 `::placeholder-shown` 伪类、`position` 属性和相邻兄弟选择器 (`+`) 的结合运用，提供一套完整的 html 和 css 解决方案，确保标签的视觉效果和用户体验。

实现输入框填充后标签保持在顶部

在现代 Web 表单设计中，一种流行的交互模式是“浮动标签”或“占位符标签”，即当输入框为空时，标签显示在输入框内部作为提示；一旦用户开始输入或输入框获得焦点，标签则平滑地移动到输入框上方。这种设计既节省了空间，又提供了清晰的用户指引。本文将详细讲解如何通过 CSS 实现这一效果，确保标签在输入框被填充后依然保持在顶部。

核心原理与技术栈

要实现这一效果，我们需要利用以下 CSS 特性：

position: relative 和 position: absolute: 父容器 (.txt_field) 设置 position: relative，使其成为子元素 (label) 绝对定位的参照系。标签 (label) 设置 position: absolute，以便能够精确控制其位置。
transform: translateY(-50%): 用于在标签初始位置时垂直居中。
transition: 实现标签位置和颜色的平滑过渡效果。
:focus 伪类: 当输入框获得焦点时触发样式变化，将标签移动到顶部。
:not(:placeholder-shown) 伪类: 这是实现标签在输入框有内容后保持在顶部的关键。它选择那些没有显示占位符的输入框，即输入框中已经有内容的输入框。
+ (相邻兄弟选择器): 选择紧跟在某个元素后的兄弟元素。在本例中，我们用它来选择紧跟在 input 后的 label。
::placeholder 伪元素: 用于隐藏输入框原生的占位符文本，避免与我们自定义的浮动标签冲突。
placeholder 属性: 输入框必须包含非空的 placeholder 属性，::placeholder-shown 伪类才能正常工作。

HTML 结构

首先，我们需要一个包含输入框和标签的父容器。确保 label 元素紧跟在 input 元素之后，因为我们将使用相邻兄弟选择器。

<div class="txt_field">
  <i class="fa fa-user"></i>
  <input type="text" class="textbox" id="username" placeholder="请输入手机号/邮箱">
  <label for="username">手机号/邮箱</label>
</div>

登录后复制

注意事项：

input 标签必须包含一个非空的 placeholder 属性。即使你不想显示原生占位符，也需要它来激活 :placeholder-shown 伪类。
label 标签的 for 属性应与 input 标签的 id 属性匹配，以提高可访问性。

CSS 样式

接下来，我们将逐步构建 CSS 样式。

ProfilePicture.AI

在线创建自定义头像的工具

查看详情

/* 容器样式 */
.txt_field {
  position: relative; /* 确保子元素绝对定位的参照系 */
  margin-bottom: 30px; /* 为浮动标签留出空间 */
  border-bottom: 2px solid #adadad; /* 底部边框 */
}

/* 输入框样式 */
.txt_field input {
  width: 100%;
  padding: 0 5px;
  height: 40px;
  font-size: 16px;
  border: none;
  background: none;
  outline: none; /* 移除默认焦点轮廓 */
  z-index: 2; /* 确保输入框在标签之上 */
  position: relative; /* 确保 z-index 生效 */
}

/* 标签样式 */
.txt_field label {
  position: absolute;
  top: 50%; /* 初始位置居中 */
  left: 5px;
  color: #adadad;
  transform: translateY(-50%); /* 垂直居中 */
  font-size: 16px;
  pointer-events: none; /* 允许点击穿透到输入框 */
  transition: .3s ease; /* 平滑过渡效果 */
  z-index: 1; /* 确保标签在输入框之下 */
}

/* 输入框获得焦点或已填充时标签的样式 */
.txt_field input:focus + label,
.txt_field input:not(:placeholder-shown) + label {
  top: -20px; /* 移动到输入框上方 */
  font-size: 14px; /* 缩小字体 */
  color: #0170C1; /* 改变颜色 */
  transform: translateY(0%); /* 移除垂直居中 */
}

/* 隐藏原生占位符文本 */
.txt_field input::placeholder {
  color: transparent;
}

/* 底部边框在焦点时的变化 */
.txt_field span::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0%;
  height: 2px;
  background: #0170C1;
  transition: .3s;
}

.txt_field input:focus ~ span::before {
  width: 100%;
}

登录后复制

样式解析：

.txt_field:
- position: relative;：这是至关重要的，它将父容器设置为 label 绝对定位的参照系。
- margin-bottom 和 border-bottom：用于创建输入框底部的视觉效果和为浮动标签预留空间。
.txt_field input:
- width: 100%;, height: 40px;, padding: 0 5px;：定义输入框的基本尺寸和内边距。
- border: none;, background: none;, outline: none;：移除输入框的默认边框、背景和焦点轮廓，以便我们自定义样式。
- z-index: 2; position: relative;: 确保输入框在标签之上，可以正常输入。
.txt_field label:
- position: absolute;：允许我们精确控制标签的位置。
- top: 50%; left: 5px; transform: translateY(-50%);：将标签初始定位在输入框内部的垂直居中位置。
- pointer-events: none;：这很重要，它允许用户点击标签下方的输入框区域，而不是点击标签本身。
- transition: .3s ease;：为标签的移动和颜色变化添加平滑的动画效果。
- z-index: 1;: 确保标签在输入框之下，避免遮挡。
.txt_field input:focus + label, .txt_field input:not(:placeholder-shown) + label:
- 这是实现核心功能的关键选择器。
- input:focus + label：当输入框获得焦点时，选择紧邻它的 label。
- input:not(:placeholder-shown) + label：当输入框没有显示占位符（即输入框有内容）时，选择紧邻它的 label。
- top: -20px;, font-size: 14px;, color: #0170C1;, transform: translateY(0%);：这些样式将标签移动到输入框上方，并调整其大小和颜色，使其看起来像一个标题。
.txt_field input::placeholder:
- color: transparent;：将原生占位符文本颜色设置为透明，使其不可见，避免与浮动标签重叠。

总结

通过结合使用 position 属性、:focus 伪类、:not(:placeholder-shown) 伪类和相邻兄弟选择器 (+)，我们成功实现了一个功能完善且用户体验良好的浮动标签效果。这种方法避免了 JavaScript 的复杂性，纯粹通过 CSS 实现了这一交互模式，提高了性能和可维护性。

关键点回顾：