HTML中label标签实现输入框标题上浮效果-html教程-PHP中文网

纯css实现浮动label需用input:focus + label或:not(:placeholder-shown)捕获输入状态，label必须置于input后且父容器设position: relative，placeholder不能为空字符串，safari需加-webkit-前缀，ie11等旧环境需js降级处理。

html中label标签实现输入框标题上浮效果

为什么只用 `:focus` 会出问题

很多初学者写 input:focus + label，结果用户填完内容一失焦，label 就立刻掉回输入框里盖住文字。这不是动画没做好，而是状态判断漏了——聚焦（focus）只是临时态，而「已输入」才是持久态。浏览器不会因为你填了字就自动认为你还在聚焦，所以必须靠 :not(:placeholder-shown) 捕捉真实内容状态。

`:not(:placeholder-shown)` 的硬性前提

这个伪类不是“有内容就触发”，它依赖两个关键条件：

input 必须带 placeholder 属性，且不能是空字符串（placeholder="" 不行），哪怕写 placeholder=" " 都比空好
如果用 JS 动态回填数据（比如编辑页加载时赋值），:not(:placeholder-shown) 不会自动激活，得手动触发：input.value = "xxx"; input.dispatchEvent(new Event("input", { bubbles: true }));
Safari 需要加 -webkit- 前缀，写成 input:not(:-webkit-placeholder-shown) 才能兼容

HTML 结构和 CSS 定位的关键细节

结构上，label 必须紧跟在 input 后面，且两者共用一个相对定位的父容器：

<div class="form-group">
  <input type="text" id="email" placeholder=" "><label for="email">邮箱</label>
</div>

对应的 CSS 要点：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

父容器 .form-group 必须设 position: relative，否则 label 的 position: absolute 会往上层找定位上下文，多个输入框的 label 就容易叠在一起
label 初始位置建议用 top: 0.75rem; transform: translateY(0);，而不是固定 top: 10px，这样更适配不同字号
动画要分开控制：上浮用 transform，缩放用 font-size 和 opacity，三者都得加 transition，但别偷懒写 transition: all .2s——它会让没变化的属性也参与重绘，引发轻微抖动

IE 或旧安卓 WebView 怎么办

如果你的项目还要求支持 IE11 或 Android 4.x 的 WebView，:placeholder-shown 直接不可用。这时候退化方案不是“加 polyfill”，而是改用 JS 监听 input 和 blur 事件，手动切换一个 filled 类：

input.addEventListener("input", () => {
  label.classList.toggle("filled", input.value.trim() !== "");
});
input.addEventListener("blur", () => {
  label.classList.toggle("filled", input.value.trim() !== "");
});

然后用 .filled 替代 :not(:placeholder-shown) 写样式。重点是：这个逻辑必须在页面加载后、表单初始化前执行，否则动态回填的数据不会触发状态更新。

最常被忽略的是父容器定位和 placeholder 值的非空性——这两个点一旦错，整个浮动逻辑就静默失效，连报错都没有，只能靠检查 computed styles 一层层排查。