直接改placeholder属性值即可换提示文字；改样式必须用::placeholder伪元素并写全浏览器前缀，否则不生效；它仅支持color、font-size等有限属性，不继承font-family，且不能替代label或提交数据。
直接改 placeholder 属性值就能换提示文字，这是最简单、最可靠的方式；想改颜色或字体大小，必须用 ::placeholder 伪元素，写错前缀或漏掉双冒号就完全不生效。
怎么安全修改 placeholder 文字内容
文字内容只能通过 HTML 的 placeholder 属性设置，不能靠 CSS 或 JS 动态“覆盖”显示——JS 只能重新赋值该属性，且得等 DOM 加载完再操作。
-
placeholder必须写在<input type="text">、<input type="search">、<textarea></textarea>这类支持的标签里，写在<label></label>或用value代替会失效 - 值要用双引号包裹，中文、空格、标点都合法，例如：
placeholder="搜一搜商品、品牌" - 如果项目用了 Vue/React，
placeholder很可能绑定的是变量（如:placeholder="searchTip"），得去查对应 data 或 state 源头 - 别把
placeholder当默认值用——它不参与表单提交，清空输入框后也不会自动恢复
为什么 ::placeholder 样式经常不生效
根本原因是浏览器实现不统一，且伪元素语法容错率极低。只写 ::placeholder 看似简洁，但在 Chrome 50 以下、Firefox 18、IE 10+ 等环境里直接被忽略。
- 必须同时声明多个前缀才能真正“全兼容”：
::placeholder、::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder - 单冒号写法（如
:placeholder）在所有浏览器中都无效，双冒号是硬性要求 -
::placeholder不继承父元素的font-family，不显式声明就会回退到系统等宽字体，看着突兀 - 某些安卓 WebView 对
opacity渲染异常，建议优先用color: rgba(0,0,0,0.6)而非opacity: 0.6
哪些样式能改，哪些改了也没用
::placeholder 支持的样式非常有限，不是所有 CSS 属性都能作用于它。强行加不支持的属性，浏览器会静默忽略，不会报错，但效果出不来。
立即学习“前端免费学习笔记（深入）”；
- ✅ 可用：
color、font-size、font-weight、font-family、text-transform、opacity - ❌ 无效：
width、height、padding、margin、line-height（部分浏览器渲染但不可靠）、background、vertical-align - 占位符无法“垂直居中调整”，所谓“往上拉”只能靠调父级
input的height、padding和line-height三者匹配来间接控制视觉位置 - 别对
::placeholder用transform: translateY()，Safari 可能触发重绘异常
暗色模式下 placeholder 几乎看不见怎么办
系统启用 @media (prefers-color-scheme: dark) 后，::placeholder 不会自动变色，深背景配默认 #999 就等于隐形。
- 必须手动在媒体查询里重写
color，例如：@media (prefers-color-scheme: dark) { input::placeholder { color: #666; } } - 别指望浏览器自动适配——
::placeholder没有 color-scheme 继承机制 - 如果页面用了 CSS 变量（如
--placeholder-color），记得在暗色模式媒体查询里也更新变量值，否则 JS 注入样式也可能失效 - 真要精细控制位置或交互（比如聚焦时淡出），就得放弃原生 placeholder，改用 JS +
<label></label>浮层模拟，但这会增加可访问性维护成本
