本教程详细介绍了如何使用 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 元素之后，因为我们将使用相邻兄弟选择器。
注意事项：
- input 标签必须包含一个非空的 placeholder 属性。即使你不想显示原生占位符，也需要它来激活 :placeholder-shown 伪类。
- label 标签的 for 属性应与 input 标签的 id 属性匹配，以提高可访问性。
CSS 样式
接下来，我们将逐步构建 CSS 样式。
/* 容器样式 */
.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 实现了这一交互模式，提高了性能和可维护性。
关键点回顾：
- 父容器 position: relative。
- 标签 position: absolute。
- input 必须有非空的 placeholder 属性。
- 使用 input:not(:placeholder-shown) + label 来检测输入框是否已填充。
- 使用 ::placeholder 伪元素隐藏原生占位符。
- label 元素必须紧跟在 input 元素之后，以便 + 选择器生效。
