必须用伪元素选择器如input::placeholder修改placeholder颜色，color属性无效；需分别书写带前缀的规则并重置Firefox的opacity，且样式不可继承。

能改，但不能靠 color 属性直接改。

color 只影响用户输入的文字，对 placeholder 文字完全无效——这是浏览器规范决定的，不是 CSS 写错了。

---

::placeholder 是唯一标准方式

• 必须用伪元素选择器，不能只写 ::placeholder，得带上元素限定，比如 input::placeholder 或 textarea::placeholder
• 单独写 ::placeholder（无前缀、无元素名）在所有浏览器里都不生效
• 现代浏览器（Chrome 57+、Firefox 51+、Safari 10.1+）支持无前缀写法，但老版本必须加前缀，否则样式彻底丢失

---

浏览器前缀必须分开写，不能合并

• 每个前缀规则要独立成行，不能用逗号分组：
  ❌ 错误：input::-webkit-input-placeholder, input::-moz-placeholder { color: #666; }
  ✅ 正确：每个选择器单独声明，互不干扰

  input::-webkit-input-placeholder { color: #666; }
  input::-moz-placeholder { color: #666; }
  input:-ms-input-placeholder { color: #666; }
  input::placeholder { color: #666; }

• 原因：只要组里有一个选择器语法错误或不被支持，整条规则都会被浏览器丢弃

---

Firefox 的 opacity 问题常被忽略

• Firefox 默认给 ::-moz-placeholder 加了 opacity: 0.52（约半透明），即使写了 color: #333，实际看起来还是发灰

  

  Wechat Article Html

  将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

  下载

• 解决办法是显式重置：opacity: 1

  input::-moz-placeholder {
  color: #333;
  opacity: 1;
  }

• 这个细节在调试时容易漏掉，尤其当设计稿要求 placeholder 和输入文字颜色一致时

---

::placeholder 不继承父级 color，也不响应 font 等属性的隐式继承，所有样式都得显式声明；而且它只作用于 input 和 textarea，对 contenteditable 或自定义组件无效。

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