本教程详细介绍了如何使用 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 元素之后，以便 + 选择器生效。
以上就是实现输入框填充后标签保持在顶部的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1601565.html
微信扫一扫 
支付宝扫一扫 
