真正可行的是“视觉隐藏文本但保留交互元素布局与功能”，核心靠 text-indent + line-height 组合：text-indent: -1000vw 将文本移出可视区，line-height: 0 消除行高占位，并需重置子元素如 input 的 text-indent 和 line-height 以避免继承异常。
直接用 display: none 或 visibility: hidden 会连带隐藏整个 label 或其内部的 input，不可取。真正可行的是“视觉隐藏文本但保留交互元素布局与功能”，核心靠 text-indent + line-height 组合。
为什么不能对 label 直接设 display: none
因为 label 往往包裹着 input（尤其是 type="file" 或第三方库生成的结构），设 display: none 会让整个标签及其子元素消失，input 失去可点击区域，文件选择、焦点传递等功能全部失效。
- 若仅想隐藏“Search:”这类提示文字，却让
input不可用，就违背了隐藏初衷 -
aria-hidden="true"也不行——它只屏蔽读屏器，不解决视觉上文字仍占位的问题 -
opacity: 0更危险：文字透明但依然可点击、可聚焦，容易造成 tab 键迷路或误触
text-indent 移出文本 + line-height 折叠空间
这是目前最稳定、无 JS、兼容性好（IE9+）的纯 CSS 方案。原理是把文本“推走”且“压扁”，让它既看不见，也不占空间。
-
text-indent: -1000vw：用视口单位确保在任何屏幕下都移出可视区；比-9999px更可靠（避免高缩放下意外露头） -
line-height: 0：消除文本行高，否则即使文本被推走，label高度仍会被撑开，导致下方元素错位 - 这两个样式必须加在包含文本的容器上——通常是
label自身，或它的父级（如.dataTables_filter）
必须重置子元素样式，否则 input 也变形
text-indent 和 line-height 是继承属性，input 会一并继承，导致输入框内容错位或高度塌陷。
立即学习“前端免费学习笔记（深入）”；
- 给
input单独重置：text-indent: 0、line-height: normal（或具体数值如1.5） - 如果
input是inline元素，还需确认其vertical-align值（常设为middle避免基线偏移） - 更稳妥的做法是作用于父容器，再针对性重置子元素，例如：
.dataTables_filter { text-indent: -1000vw; line-height: 0; } .dataTables_filter input { text-indent: 0; line-height: 1.4; vertical-align: middle; }
隐藏 file input 时 label 的特殊处理
当 label 用于触发 input[type="file"] 时，常见做法是把 input 隐藏、label 承担 UI，此时“隐藏 label 内部文本”反而不是重点——重点是确保 input 可访问但不可见。
- 不要用
display: none隐藏input，推荐用 clip-path 或传统“1px 定位法”：input[type="file"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } - 这样既能保证屏幕阅读器识别，又不会影响
label的点击透传 - 如果
label里还有辅助文本（如“点击上传”），而你只想隐藏它，才回到前面的text-indent方案
真正容易被忽略的是继承性——很多人加了 text-indent 就以为完事，结果 input 文字缩进、placeholder 上浮、整体高度异常。务必检查子元素是否被意外影响，重置要具体到每个需要恢复的属性。
