Question

由于我非常短视，在尝试了几种解决方案后，我想自定义Firefox以查看具有我自己设置的网页。我定义了一个放在chrome /目录中的'userContent.css'文件。 CSS似乎适用于某些项目（选项，一些按钮）但不适用于所有项目。这是一个简单的HTML测试用例。我希望imputs有深蓝色背景和白色前景色;

<html>
  <head>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
  </head>
  <body>
    <br/><br/>
    <form action='/~moumou/perso/books/books.rvt?action=add' method='GET' enctype='multipart/form-data'>
      Titre : <input name='titre'><br/>
      Prénom <input name='prenom'><br/>
      Nom <input name='nom'><br/>
      <input type='submit'>
    </form>
  </body>
</html>

输入框显示为白色背景和黑色foregrnad颜色。 userContent.css文件如下：

select {
    background : #001144 !important;
    color: white !important;    
}
button {
    background-color: #001144 !important;
    color: white !important;
}
option {
    background-color: #001144 !important;
    color: white !important;
}
select option {
    background-color: #221144 !important;
    color: white !important;
}
div input {
    background-color: #001144 !important;
    color: white !important;
}
input[type="text"],textarea {
    background-color: #001144 !important;
    color: white !important;
}
input[type="button"] {
    background-color: #001144 !important;
}
form input {
    background-color: #001144 !important;
    color: white !important;
}
input {
    background-color: #001144 !important;
    color: white !important;
}

正如你所看到的，我尝试了几种方法来强制输入蓝色bg和白色fg。

为什么这些设置不适用于输入，有些设置呢？

非常感谢你的帮助！

Answer 1

我不确定你的例子出错的地方，但这里有一些一般性的指示：

您可以将多个选择器组合成一个规则，因此您可以列出选择器并声明颜色一次，而不是创建一个包含重复规则的表单元素的长列表。您不需要使用div，form等对每个表单元素选择器进行限定。
浏览器的表单控件样式是CSS和您操作系统上的表单控件的默认外观的混合。大多数事情应该能够覆盖，但有时它可能会很棘手。用于接受CSS的按钮和输入的一个技巧是影响border属性 - 它似乎迫使浏览器“聆听”＃34;到CSS。
同样，浏览器具有表单控件的默认CSS，因此它们不会自动继承字体大小或字体系列等内容。如果要覆盖此值，可以设置font: inherit（例如）。
除此之外，您的样式表应正常工作，因为带有!important的用户样式表应覆盖任何作者或用户代理样式表。

这是您的代码示例，重写为单个选择器列表，并添加了边框。我使用了类型属性选择器的否定，以避免样式复选框和单选按钮。如果您想要相同的颜色，可以将该部分切换为普通input选择器。

select,
option,
button,
input:not([type="checkbox"]),
input:not([type="radio"]),
datalist,
textarea {
  font-size: inherit !important;
  background-color: #001144 !important;
  color: white !important;
  border: .05em solid red !important;
}

我在这里举了一个例子：http://jsbin.com/bosidoz/4/edit?html,css,output - 随意尝试复制/粘贴，并在有任何进一步的问题时发表评论。让我知道它是怎么回事祝你好运！

Firefox userContent不适用

1 个答案: