placeholder属性仅对<input>（type为text、search、tel、url、email、password、number）和<textarea>生效，不可替代label或value，样式须用::placeholder及各浏览器前缀伪元素统一设置。
直接用 placeholder 属性就行，但加了不等于用对了——它既不是默认值，也不算无障碍标签，更不能当格式校验用。
哪些元素和 type 能用 placeholder
只对两类原生元素生效：<input>（type 为 text、search、tel、url、email、password、number）和 <textarea>。
-
<select>、<input type="date">、<input type="file">、<div contenteditable="true">上加placeholder属性完全无效，浏览器直接忽略 -
type="number"在部分旧版 Android WebView 中可能不显示提示文字 -
type="tel"和type="search"是最稳妥的选择，适合写格式示例（如placeholder="138-1234-5678"） - 自定义组件（如 React/Vue 封装的输入框）必须显式把
placeholderprop 透传到内部<input>才能生效
placeholder 不是 label，也不能当默认值
它只是视觉提示，没有语义，屏幕阅读器基本不读；用户一输入就消失，后端也收不到它的内容。
- 每个
<input>必须配<label for="xxx">或嵌套写法，否则 WCAG 可访问性会失败 - 别在
placeholder里重复label文字，比如label已写“邮箱”，placeholder就该写“example@domain.com” - 需要默认值请用
value属性（如<input value="北京">），placeholder不能替代 - 必填说明、格式约束（如“6–20位”）、错误提示等，不能只靠
placeholder——它一输就没了
样式怎么改？伪元素前缀必须写全
直接在 <input> 上设 color 或 font-size 对占位文字完全无效，只能靠 CSS 伪元素控制。
立即学习“前端免费学习笔记（深入）”；
- 必须同时声明：
input::placeholder、input::-webkit-input-placeholder、input::-moz-placeholder、input:-ms-input-placeholder、input::-ms-input-placeholder - Firefox 默认让
placeholder半透明（opacity: 0.53），其他浏览器不透明，建议统一加opacity: 1 -
::placeholder不继承父级字体，如果用了自定义字体，得在伪元素里显式声明font-family - iOS Safari 对长文本会自动截断为“请输入…”，且无法用 CSS 禁用
移动端常见坑：遮挡、偏移、截断
iOS Safari 和某些安卓 WebView 对 placeholder 的渲染特别敏感，稍不注意就显示异常。
- 给
<input>设定明确的height和line-height，且两者必须相等；只靠padding-top撑高会导致垂直居中错乱 - 避免
overflow: hidden，它会裁掉超出可视区的占位文字 - 在 iOS 开启「辅助功能 → 显示缩放」后手动验证是否仍完整可见
- 带搜索图标的输入框中高发遮挡问题，建议用
padding-left预留图标空间，而非绝对定位覆盖
最容易被忽略的是：它不参与表单提交，也不触发任何事件，JS 动态赋值 el.placeholder = "xxx" 看似简单，但在 React/Vue 中容易引发 SSR 与客户端不一致，或安卓 WebView 闪动。真要动态换文案，优先用 class 切换预设值，而不是频繁操作属性。
