Firefox 忽略 userContent.css 中的设置（有时）

Question

我的代码中有以下代码$HOME/.mozilla/firefox/XXXXXXXX.default/chrome/userContent.css：

input, textarea {
color:#000  !important;
background-color: rgb(255, 255, 255) !important;
}

目的是让输入字段和文本区域始终为白底黑字。我的桌面主题是黑暗的，如果没有这个 hack，firefox 会在深灰色背景上显示输入和文本区域黑色文本，这几乎是不可读的。

这适用于大多数网站，但有些网站仍像以前一样显示（灰色背景上的黑色文本）。例如这个网站。

我已经安装dom inspector并验证了该元素的类型input。但是为什么我的 css 设置会被这个站点忽略呢？

子问题：

是否有一些文档/手册，其中解释了这些配置选项？即我怎么知道关键字是background-color和不是background？另外，除了inputand之外我还能配置textarea什么？

Answer 1

问题是输入框默认由操作系统呈现，而不是由 css 样式表呈现。您可以通过 Gecko 特定的非标准 CSS 属性-moz-appearance. 像这样使用它：

input, textarea {
  color:#000  !important;
  background-color: rgb(255, 255, 255) !important;
  -moz-appearance: none !important;
}

现在，所有输入框都由 CSS 呈现。

子问题：

是否有一些文档/手册，其中解释了这些配置选项？

• Mozilla 开发者网络：-moz-appearance

除了 input 和 textarea 之外，我还能配置什么？

您想要的一切，还有另一个名为userChrome.css（在同一文件夹中）的文件，您可以在其中自定义用户界面的外观。

我怎么知道关键字是background-color和不是background？

• background-color: 设置元素的背景颜色。例子：

  background-color:red;
  background-color:#0000FF;
  background-color:rgb(255,0,255);
  

• background: 在一个声明中设置所有背景属性。例子：

  background: #FF0000 url('blah.jpg') no-repeat fixed center;