直接写::placeholder可修改颜色，但仅限Chrome 57+、Firefox 51+、Edge 79+等现代浏览器；需用双冒号、显式声明color和opacity:1，旧版Safari需补::-webkit-input-placeholder，IE11需用:-ms-input-placeholder或JS模拟。
直接写 ::placeholder 就能改颜色，但只在现代浏览器生效
Chrome 57+、Firefox 51+、Edge 79+ 都支持标准 ::placeholder，写法最干净：input::placeholder { color: #666; }。它天然作用于 <input> 和 <textarea></textarea>，无需额外声明。
常见错误是写成单冒号 :placeholder 或中间加空格 :: placeholder，这两种写法浏览器直接忽略，DevTools 里也看不到规则。
必须显式声明 color，不能依赖父级继承——Firefox 默认不继承，Chrome 虽然继承但 opacity 可能被设为 0.53，导致文字过淡；建议顺手加上 opacity: 1。
Safari 14.0 及更旧版本必须补 ::-webkit-input-placeholder
Safari 14.1 才开始支持标准 ::placeholder，之前版本（包括大量 iOS 用户）只认 ::-webkit-input-placeholder。如果你的项目仍需兼容企业内网或老设备，这条不能省。
立即学习“前端免费学习笔记（深入）”；
注意：这条规则要放在标准写法之后，否则可能被覆盖；也不要和 ::-moz-placeholder 或 ::-ms-input-placeholder 混用——后者在当前主流版本中已废弃，反而可能触发冗余样式或优先级冲突。
示例顺序：
input::placeholder { color: #666; }
input::-webkit-input-placeholder { color: #666; }
IE11 和旧 Edge 只能靠 :-ms-input-placeholder 或 JS 模拟
IE11 完全不识别 ::placeholder 及任何双冒号变体，唯一可用的是 :-ms-input-placeholder（注意是单冒号）。Edge 12–18 也只支持这个写法。
如果目标用户仍有 IE11，必须加这一条：
input:-ms-input-placeholder { color: #666; }
但要注意：IE11 对伪元素支持极弱，font-size、font-weight 等属性可能失效；若要求严格一致，得用 JavaScript 动态插入 label 或 span 模拟 placeholder 行为。
Vue/React 里 ::placeholder 失效？多半是作用域隔离惹的祸
Vue 的 <style scoped></style> 会给选择器自动加属性哈希，比如 input::placeholder 变成 input[data-v-xxx]::placeholder，而浏览器不支持带属性的选择器匹配伪元素。
解决方法只有穿透：
- Vue 中用
:deep(input::placeholder) - React + CSS Modules 中用
:global(input::placeholder) - 或者干脆把
::placeholder规则提出来，放到全局 CSS 文件里
另外，Ant Design、Bootstrap 这类 UI 框架常自带 input::placeholder 重置规则，优先级可能比你的高；用 DevTools 查看是否被 strike-through，必要时加类名提升权重，比如 .my-input::placeholder。
真正麻烦的不是写法，而是不同浏览器对 opacity、font-style、line-height 的默认处理差异——比如 Safari 在 line-height: 2 下容易把 placeholder 压到顶部，最好显式写 line-height: normal。这些细节不真机测，上线才暴露。
