最简方式是用 ::placeholder 设置 color，但在 safari 14.0 及更早、ie11 和部分内网环境会失效，需同时声明标准及各浏览器前缀写法，并显式设置 opacity: 1 以确保可见性。

直接用 ::placeholder 设置 color 是最简方式，但只写这一条，在 Safari 14.0 及更早、IE11、部分企业内网环境里会完全失效。

为什么 ::placeholder 写了却没反应？

常见现象是 DevTools 里看到规则被划掉，或颜色根本不变。原因通常不是语法错，而是：

• ::placeholder 必须用双冒号——写成 :placeholder 或 :: placeholder（带空格）都不生效
• 某些 UI 框架（如 Ant Design、Bootstrap）会重置它，比如加了 input { color: #333; }，而 ::placeholder 默认优先级低于标签选择器
• Vue 的 <style scoped></style> 或 React CSS Modules 会自动加属性选择器，导致 input::placeholder 变成 input[data-v-xxx]::placeholder，浏览器不认
• IE11 完全不支持任何 ::placeholder 变体，连 ::-ms-input-placeholder 都要单冒号写法

兼容性写法必须覆盖这四类浏览器

不能只靠 ::placeholder。按实际支持情况，需同时声明：

• input::placeholder, textarea::placeholder —— Chrome 57+、Firefox 51+、Edge 79+
• input::-webkit-input-placeholder, textarea::-webkit-input-placeholder —— Safari ≤ 14.0、Chrome 49–56、旧版 Opera
• input::-moz-placeholder, textarea::-moz-placeholder —— Firefox 20+（双冒号）；input:-moz-placeholder（单冒号）仅用于 Firefox 18–19，现在可省略
• input:-ms-input-placeholder, textarea:-ms-input-placeholder —— IE10–11，注意是单冒号，且不能写成双冒号

顺序建议把标准写法放最前，前缀写法跟在后面，避免意外覆盖。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

color 不够，还得加 opacity: 1

Firefox 默认 opacity 是 0.53，Chrome 某些版本会继承父级透明度，结果文字看起来发灰、看不清。实操中：

• 显式写 color: #999; opacity: 1;，比只设 color 更可靠
• 避免用 opacity: 0.6 模拟“弱提示”——它会让色盲用户更难识别，不如直接调 color 的明度
• 深色背景上慎用浅灰，建议用 #a0a0a0 这类中灰，比默认 #cccccc 更易读

动态换色或暗色模式下怎么处理？

::placeholder 本身不响应 :focus 或媒体查询的自动切换，得手动兜底：

• 暗色模式用 @media (prefers-color-scheme: dark) 套一层，重写 color
• 想根据 JS 状态换色？不能直接改伪元素样式，得切换 class，比如 .dark-theme input::placeholder { color: #666; }
• 禁用态的占位符要用 input:disabled::placeholder 单独写，::placeholder 在 disabled 下默认不触发

真正容易被忽略的是：移动端真机测试比 DevTools 模拟更重要，iOS Safari 对 font-weight 和 text-transform 支持不稳定，别依赖这些做关键视觉区分。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！