如何通过CSS ::placeholder修改输入框占位符的颜色和字体？-css教程-PHP中文网

必须同时声明input::placeholder、::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder四套前缀规则才真正兼容各浏览器；它仅美化placeholder属性已定义的内容，不支持添加文字，且仅允许color、font-size、opacity等有限文本样式。

如何通过css ::placeholder修改输入框占位符的颜色和字体？

Chrome/Firefox/Edge 中 ::placeholder 伪元素的基本写法

现代浏览器基本都支持 ::placeholder，但它不是标准伪类，而是带前缀的实验性特性演化而来，所以必须用标准写法加兼容写法才能覆盖主流环境。只写 ::placeholder 在 Safari 15.4+ 和旧版 Chrome（

推荐写法是把四种常见前缀和标准形式都列出来，让浏览器自己选能识别的那个：

input::placeholder,
textarea::placeholder {
  color: #666;
  font-size: 14px;
  font-family: "Helvetica Neue", sans-serif;
}

注意：不要用 :placeholder（单冒号），那是旧版 WebKit 的写法，已废弃；必须用双冒号 ::placeholder。

Safari 对 ::placeholder 的特殊限制

Safari（尤其是 15.4 之前版本）对 ::placeholder 支持不完整，比如不支持 font-weight、line-height，甚至某些字体族会回退到系统默认。更关键的是：Safari 不允许在 ::placeholder 中使用 CSS 变量（var(--color)），会直接忽略整条声明。

如果你依赖设计系统变量，得 fallback 成硬编码值，或用 JS 动态注入 style：

input::placeholder {
  color: #666; /* 不能写成 color: var(--placeholder-color); */
  font-family: -apple-system; /* Safari 对自定义字体更敏感，建议加系统字体兜底 */
}

避免在 ::placeholder 里用 opacity 模拟浅色——Safari 渲染异常，颜色可能变灰黑
如果用了 text-transform: uppercase，Safari 会强制转换占位符文本，但 Chrome 不会，行为不一致

IE 和老版 Edge 不支持 ::placeholder 怎么办

IE 完全不支持 ::placeholder，旧版 Edge（::-ms-input-placeholder。如果项目还需兼容 IE11，必须单独处理：

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

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

下载

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: #999;
  font-size: 13px;
}
<p>/<em> 同时保留标准写法 </em>/
input::placeholder,
textarea::placeholder {
color: #666;
font-size: 14px;
}</p>

注意：IE 下 ::-ms-input-placeholder 是单冒号，且只作用于 <input> 和 <textarea></textarea>，不支持 <contenteditable></contenteditable> 元素。

不要试图用 JavaScript 模拟 placeholder 样式（比如用 label 覆盖），容易破坏可访问性（ARIA 属性、屏幕阅读器读取逻辑）
如果用 CSS-in-JS 库（如 styled-components），需确认它是否自动注入前缀——多数现代库不自动加 ::-ms-input-placeholder，得手动写

字体大小和垂直对齐容易被忽略的问题

::placeholder 的 font-size 默认继承父级，但它的行高、基线位置和 input 内容不一致，尤其在设置了 padding 或 height 的输入框里，占位符常显得偏上或偏下。

最稳妥的做法是显式设置 line-height 并与 input 的 line-height 保持一致：

input {
  padding: 8px 12px;
  line-height: 1.5;
  font-size: 16px;
}
input::placeholder {
  color: #999;
  font-size: 16px;
  line-height: 1.5; /* 必须匹配 input 的 line-height */
}

否则在 Firefox 中，占位符文字可能贴顶显示；在移动端 Safari，可能出现截断或模糊渲染。

真正麻烦的不是写法，而是不同浏览器对「占位符是否参与盒模型计算」的理解差异——它不占空间，但样式表现又受容器尺寸约束。调样式时别只看 Chrome，至少在 Safari 和 Firefox 的响应式视图里快速过一遍。