必须用伪元素分别设置：input::placeholder、::-moz-placeholder、::-webkit-input-placeholder，显式声明color和opacity:1；支持font-size等文本属性，但不支持border、transform等盒模型或动态效果。
placeholder文字颜色和透明度怎么改
默认情况下，input 的 placeholder 是浅灰色且半透明的，但不同浏览器渲染逻辑不同，必须用伪元素单独选中才能生效。Chrome、Edge、Safari（WebKit）用 ::placeholder，Firefox 还要额外加 ::-moz-placeholder（旧版）和 ::-moz-placeholder（新版，注意双冒号）。
常见错误是只写 ::placeholder，结果 Firefox 下完全不生效。正确写法要覆盖全：
input::placeholder {
color: #666;
opacity: 1;
}
input::-moz-placeholder {
color: #666;
opacity: 1;
}
input::-webkit-input-placeholder {
color: #666;
opacity: 1;
}
注意：opacity 设为 1 才能彻底去掉默认的灰暗感；设 color 同时设 opacity，否则某些浏览器（如 Safari）可能忽略颜色。
能否给placeholder加背景色或字体大小
可以，但限制明显：所有样式属性都必须通过上述伪元素设置，不能在普通 input 规则里写。比如想调大字号，必须写在 ::placeholder 块内，而不是父选择器里。
支持的属性包括：color、font-size、font-weight、text-transform、letter-spacing、background（仅限纯色，渐变会失效）、padding（部分浏览器支持，但可能导致文字错位）。
不支持的典型操作：
-
line-height在多数浏览器中被忽略 -
border或outline无法直接加在 placeholder 上 -
transform、animation等动态效果基本无效
placeholder文字对齐方式怎么控制
文本对齐由 text-align 控制，但它必须写在伪元素规则里，且只影响 placeholder 本身，不影响输入内容。如果 input 本身设置了 text-align: right，placeholder 也会右对齐——但这是继承行为，不是主动设置的结果。
更稳妥的做法是显式声明：
input::placeholder {
text-align: center;
}
不过要注意：当 input 是 type="number" 时，部分浏览器（如 Chrome）会强制左对齐 placeholder，text-align 可能被忽略。这种情况下，只能靠包裹容器或 JS 动态插入模拟 placeholder 来绕过。
移动端 iOS Safari 的 placeholder 特殊问题
iOS 15+ 的 Safari 对 ::placeholder 支持变严格了：如果父 input 设置了 font 简写（比如 font: 14px/1.4 -apple-system），而 ::placeholder 没有显式重写 font-size 和 font-family，文字可能突然变小或错位。
解决方案是，在 placeholder 规则中补全字体相关属性：
input::placeholder {
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #999;
}
另外，iOS 上点击 input 弹出键盘后，placeholder 有时会短暂闪烁或消失再出现，这不是样式问题，而是渲染时机导致的，无需处理——除非用户明确反馈体验异常，否则不必过度优化。
真正容易被忽略的是：placeholder 样式不会响应 prefers-color-scheme 自动切换，如果页面支持深色模式，得手动用媒体查询重写所有 placeholder 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
