本教程详细介绍了如何使用css创建智能浮动标签输入框。通过结合:focus和:not(:placeholder-shown)伪类，以及::placeholder伪元素，实现当输入框聚焦或内容填充后，标签（label）能平滑地从输入框内部移动到顶部并保持在该位置，从而提升用户体验和界面美观度。
在现代网页设计中，为了提供更直观的用户体验，设计师们常常采用浮动标签（Floating Label）的输入框样式。这种设计模式下，当用户聚焦输入框或输入内容后，原本位于输入框内的提示标签会平滑地移动到输入框上方，避免了标签与输入内容重叠的问题，并节省了垂直空间。本文将详细讲解如何使用纯CSS实现这一效果。
核心概念与实现原理
实现浮动标签的关键在于精确控制标签在不同输入状态下的位置。我们将利用CSS的以下特性：
- position: relative 和 position: absolute： 父容器设置 position: relative，子元素（标签）设置 position: absolute，可以使标签相对于父容器进行精确定位。
- transition 属性： 用于实现标签位置变化的平滑过渡动画，提升视觉效果。
- :focus 伪类： 当输入框获得焦点时触发样式变化。
- :placeholder-shown 伪类： 当输入框的 placeholder 属性可见（即输入框为空）时触发样式。其反向选择器 input:not(:placeholder-shown) 则表示输入框已填充内容。
- ::placeholder 伪元素： 用于隐藏输入框自身的 placeholder 文本，避免与浮动标签冲突。
- 兄弟选择器 +： 当 label 紧跟在 input 元素之后时，使用相邻兄弟选择器 + 可以精确地选择到 input 后面的 label。
HTML 结构准备
首先，我们需要一个包含输入框和标签的HTML结构。为了实现标签相对于输入框的定位，它们应该被包裹在一个共同的父容器内。
<div class="txt_field"> <i class="fa fa-user"></i> <!-- 重要：input 标签必须包含一个非空的 placeholder 属性 --> <input type="text" class="textbox" id="username" placeholder="请输入手机号/邮箱"> <label for="username">手机号/邮箱</label> </div>
重要提示：
立即学习“前端免费学习笔记（深入）”；
- input 标签必须包含一个非空的 placeholder 属性。placeholder 属性的存在是 :placeholder-shown 伪类能够正常工作的必要条件。即使我们最终会隐藏 placeholder 文本，这个属性也必须存在。
- label 标签应紧跟在 input 标签之后，这样可以使用相邻兄弟选择器 + 进行精确的CSS选择。
- label 的 for 属性与 input 的 id 属性匹配，以增强可访问性。
CSS 样式实现
接下来，我们为上述HTML结构添加CSS样式，实现浮动标签的效果。
/* 父容器样式：用于相对定位 */
.txt_field {
position: relative; /* 确保子元素 label 可以相对于此容器进行绝对定位 */
margin-bottom: 30px; /* 示例间距 */
width: 300px; /* 示例宽度 */
}
/* 输入框样式 */
.txt_field input {
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none; /* 移除默认边框 */
background: none; /* 移除默认背景 */
outline: none; /* 移除聚焦时的外轮廓 */
border-bottom: 1px solid #adadad; /* 底部边框 */
}
/* 标签样式：初始状态位于输入框内部 */
.txt_field label {
position: absolute; /* 绝对定位 */
top: 65%; /* 初始位置：垂直居中偏下 */
left: 5px;
color: #adadad;
transform: translateY(-50%); /* 垂直居中对齐 */
font-size: 16px;
pointer-events: none; /* 确保点击标签时能穿透到输入框 */
transition: .3s ease; /* 平滑过渡动画 */
}
/* 输入框聚焦或已填充内容时，标签上浮并变色 */
.txt_field input:focus + label,
.txt_field input:not(:placeholder-shown) + label {
top: 0px; /* 标签上浮到顶部 */
font-size: 14px; /* 字体略微缩小 */
color: #0170C1; /* 改变颜色 */
}
/* 隐藏输入框的 placeholder 文本 */
.txt_field input::placeholder {
color: transparent; /* 将 placeholder 文本颜色设为透明 */
}
/* 聚焦时底部边框变色（可选增强效果） */
.txt_field input:focus {
border-bottom: 2px solid #0170C1;
}关键CSS规则解析：
- .txt_field { position: relative; }: 这是实现 label 绝对定位的基础。没有它，label 会相对于最近的定位祖先元素（通常是 body）进行定位。
-
.txt_field label:
- position: absolute;: 使 label 脱离文档流，可以精确控制其位置。
- top: 65%; left: 5px; transform: translateY(-50%);: 这些属性共同将标签初始定位在输入框的内部，垂直居中偏下。pointer-events: none; 确保用户点击标签时，实际是点击到下方的输入框，而不是标签本身。
- transition: .3s ease;: 为 top 和 color 属性的变化添加平滑过渡效果。
-
.txt_field input:focus + label, .txt_field input:not(:placeholder-shown) + label:
- 这是实现浮动标签核心逻辑的选择器。它组合了两种状态：
- input:focus + label: 当输入框获得焦点时。
- input:not(:placeholder-shown) + label: 当输入框的 placeholder 不可见时，即输入框中已经有内容时。
- 在这两种情况下，label 的 top 属性被设置为 0px，使其上浮到输入框的顶部，同时改变颜色和字体大小，提供视觉反馈。
- 使用 + 兄弟选择器确保只有紧邻 input 的 label 受到影响。
- 这是实现浮动标签核心逻辑的选择器。它组合了两种状态：
- .txt_field input::placeholder { color: transparent; }: 这个规则将 input 元素自带的 placeholder 文本设置为透明，使其不可见。这样可以避免 placeholder 文本与我们自定义的浮动 label 文本发生重叠或混淆。
注意事项
- placeholder 属性的必要性： 再次强调，input 标签必须包含一个非空的 placeholder 属性，placeholder=" " 也是可以的，但最好有实际文本，因为 :placeholder-shown 伪类是基于此属性的存在和可见性来判断的。
- HTML结构关系： label 必须是 input 的兄弟元素，并且紧随其后时，使用 + 选择器效果最佳。如果它们之间有其他元素，则需要使用 ~（通用兄弟选择器），但 + 的选择范围更精确。
- 可访问性： 始终为 label 标签设置 for 属性，并使其与对应的 input 标签的 id 属性相匹配，这对于屏幕阅读器和键盘导航用户至关重要。
- 兼容性： :placeholder-shown 伪类在现代浏览器中支持良好（IE11及以上），但如果需要支持更旧的浏览器，可能需要考虑JavaScript的替代方案。
总结
通过上述CSS技巧，我们成功地创建了一个具有智能浮动标签效果的输入框。这种设计不仅美观，而且通过提供清晰的视觉提示，显著提升了用户界面的可用性。掌握 :focus、:not(:placeholder-shown) 伪类以及 ::placeholder 伪元素的组合运用，能帮助开发者实现更丰富、更具交互性的表单设计。
