placeholder仅对input（text、search、tel、url、email、password、number）和textarea有效，不支持select、div等元素；仅为空值时视觉提示，不参与提交与校验，不可替代label。
placeholder 不是“提示框”，也不是“默认值”，它只在 input（text、search、tel、url、email、password、number）和 textarea 上生效，且仅作为空值时的视觉引导——一旦用户开始输入，它就消失，不参与提交、不触发校验、不被屏幕阅读器稳定读出。
哪些元素能用 placeholder，哪些不能
只有原生表单控件支持：input 的指定类型（不含 checkbox、radio、file、hidden、select）和 textarea。常见误用包括：
- 给
div或自定义组件加placeholder属性——浏览器完全忽略，无任何效果 - 在
select上写placeholder="请选择"——无效；正确做法是加一个 disabled 的空option - 用
placeholder替代label——可访问性失败，键盘用户或视力障碍者无法可靠感知字段含义
为什么 placeholder 颜色改不了或看起来不一样
直接写 input { color: #333 } 对 placeholder 完全无效，因为它不是继承文本样式，而是由浏览器独立渲染的伪内容。必须用伪元素控制，且各浏览器前缀不同：
-
input::placeholder：现代标准，但 Safari 15.4 之前需::-webkit-input-placeholder -
input::-moz-placeholder：Firefox 19+，注意它默认带opacity: 0.53，不显式设opacity: 1会导致颜色发灰 -
input:-ms-input-placeholder：IE 10–11，已废弃但仍有存量环境需要 - 务必四套都写，顺序建议把标准语法
::placeholder放最后，避免被旧规则覆盖
另外，::placeholder 只支持文本类样式（color、font-size、opacity 等），不支持 padding、background、border —— 写了也静默忽略。
React/Vue 中动态更新 placeholder 失效怎么办
框架绑定本身没问题，但容易因初始值或响应链断裂导致残留或不更新：
- React 中若
placeholder={text}的text初始为null或undefined，某些版本（尤其 React 18 严格模式）可能跳过 DOM 属性设置，导致 placeholder 没渲染或卡在旧值 - Vue 中若
:placeholder="computedText"的computedText未正确定义为computed或未监听依赖，就会一直用初始值 - 统一原则：确保传入值始终是字符串，比如
placeholder={text ?? ""}或:placeholder="String(text)" - 调试时直接检查渲染后的 DOM 元素是否存在
placeholder属性，而不是只看 JS 变量
移动端中文 placeholder 显示异常怎么调
iOS Safari 和部分安卓 WebView 对短中文 placeholder（如“手机号”）有自动缩放行为，导致模糊或截断：
- 避免给
input设固定width却没配white-space: nowrap，否则文字可能被text-overflow: ellipsis截断 - 显式声明
font-family，避开系统 fallback 字体宽度不一致问题（比如某些安卓机缺思源黑体，用默认等宽字体撑开占位符） - 不要靠
placeholder实现“浮动 label”效果——那是label+ CSS 动画的事，placeholder 本身不具备交互状态追踪能力 - 真正需要语义化提示时，
label必须存在；视觉隐藏可用visually-hidden类，而非display: none
placeholder 是个轻量级视觉辅助，不是语义层或交互层的替代品。它的边界很清晰：只在空值时出现、只对特定标签有效、不参与任何表单逻辑——越清楚这点，越不容易掉进兼容性和可访问性的坑里。
