代码之家 › 专栏 › 技术社区 › Guenther Schmitz

火狐-输入/表单的默认颜色方案?

system colors firefox

Guenther Schmitz · 技术社区 · 7 年前

我使用的LinuxMint18.3有一个黑暗的主题。因此,默认文本颜色(对于Linux系统)为浅灰色,背景为深灰色。

火狐将这些颜色用于文本输入/表单(浅灰色)和复选框(深灰色)。

然而铬有它自己的标准颜色。这就是我想要的Firefox。

我知道您可以在 userContent.css 但这覆盖了它 全部的 输入表单,而不仅仅是那些不是由网站本身设计的表单。

有没有办法让火狐也使用其他默认颜色,如铬元素,而不是其他样式的元素?

4 回复 | 直到 7 年前

VishnuVS 7 年前

我用的是薄荷糖,我也有同样的版本。这对我很有用:

去 ~/.mozilla/firefox/randomName.default . 创建名为的新文件夹 chrome (如果有 铬 文件夹已存在,请将其重命名为旧的chrome)。在 铬 文件夹创建名为的新文件 用户内容.css 并粘贴以下代码。

@-moz-document url-prefix(about:blank) {*{background-color:#202020;}}
/*
* Use this css file to eliminate problems in Firefox
* when using dark themes that create dark on dark
* input boxes, selection menus and buttons. Put this
* in the ../firefox/default/chrome folder or your
* individual user firefox profile chrome folder.
*/
input {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
textarea {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
select {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
input[type="radio"],
input[type="checkbox"] {
border: 2px inset white !important;
background-color: white !important;
color: ThreeDFace !important;
-moz-appearance: none !important;
}
*|*::-moz-radio {
background-color: white;
-moz-appearance: none !important;
}
button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
border: 2px outset white;
background-color: #eeeeee;
color: black;
-moz-appearance: none !important;
}
body {
background-color: white;
color: black;
display: block;
margin: 8px;
-moz-appearance: none !important;
}

保存文件并重新启动火狐。你的问题应该解决。祝你好运。如果您需要重新更改它,只需删除chrome文件夹并重新启动firefox。

Guenther Schmitz 7 年前

@vishnuvs的答案确实是目前为止我测试的唯一实用/有效的解决方案。我添加了一些样式(来源: https://www.inserthtml.com/2012/06/custom-form-radio-checkbox/ )因为复选框和单选按钮的工作不正常(对我来说)。

@-moz-document url-prefix(about:blank) {*{background-color:#202020;}}
/*
* Use this css file to eliminate problems in Firefox
* when using dark themes that create dark on dark
* input boxes, selection menus and buttons. Put this
* in the ../firefox/default/chrome folder or your
* individual user firefox profile chrome folder.
*/
input {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
textarea {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
select {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
input[type="radio"],
input[type="checkbox"] {
border: 2px inset white !important;
background-color: white !important;
color: ThreeDFace !important;
-moz-appearance: none !important;
}
*|*::-moz-radio {
background-color: white;
-moz-appearance: none !important;
}
button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
border: 2px outset white;
background-color: #eeeeee;
color: black;
-moz-appearance: none !important;
}
body {
background-color: white;
color: black;
display: block;
margin: 8px;
-moz-appearance: none !important;
}
input[type="checkbox"],input[type="radio"] {
appearance:none;
}
input[type="checkbox"] {
-webkit-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
}
input[type="checkbox"]:active, input[type="checkbox"]:checked:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
input[type="checkbox"]:checked {
background-color: #e9ecee;
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
color: #99a1a7;
}
input[type="checkbox"]:checked:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0px;
left: 3px;
color: #99a1a7;
}
input[type="radio"] {
-webkit-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 50px;
display: inline-block;
position: relative;
}
input[type="radio"]:checked:after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 50px;
position: absolute;
top: 3px;
background: #99a1a7;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 3px;
font-size: 32px;
}
input[type="radio"]:checked {
background-color: #e9ecee;
color: #99a1a7;
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}
input[type="radio"]:active, input[type="radio"]:checked:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

Bharata colxi 7 年前

您可以在Firefox中选择您喜欢的任何颜色: 3-bar menu (or 'Tools') > Add-ons > Themes .

或者您可以在系统设置中更改系统颜色。

如果这不起作用,请阅读 Firefox support answer :

更改字体颜色

要更改字体颜色:

单击菜单按钮并选择 选项 > 偏好 .

选择 Content General 面板。

下 字体和颜色 ,单击 颜色 按钮。

单击任何一个彩色矩形都会显示您可以选择的颜色。选择所需的颜色单击其中一个彩色矩形。

点击 好啊 关闭“颜色”窗口。

关闭 about:preferences 页。您所做的任何更改都将自动保存。

自定义字体颜色

有些网站有自定义字体颜色,要禁用它们:

单击菜单按钮并选择 选项 > 偏好 .

选择ContentGeneral面板。

下 字体和颜色 ,单击 颜色 按钮。

在打开的窗口中,设置 用我上面的选择覆盖页面指定的颜色 到 Always .

点击 好啊 关闭“颜色”窗口。

关闭 关于:首选项 页。您所做的任何更改都将自动保存。

其他颜色设置

文本和背景: 您可以在此处更改尚未指定的网页上使用的默认文本和背景色。信息。单击颜色示例选择颜色。

使用系统颜色: 选中此选项首选项使用操作系统设置中定义的颜色,而不是颜色上述规定。

链接颜色: 在这里,您可以更改Web链接的默认颜色。单击颜色示例选择颜色。

为链接加下划线: 默认情况下,链接在网页上加下划线。取消选中此选项首选项以禁用此选项。请注意,许多网站指定自己的样式规则,并且此选项首选项没有对这些网站的影响。

用上面的选择覆盖页面指定的颜色:

始终: 选择此选项首选项强制所有网站使用默认颜色。

只有高对比度主题: 此选项首选项将使Firefox使用网页作者指定的颜色,除非使用高对比度WindowsLinux主题时。

从未: 选择此选项首选项使Firefox使用网页作者指定的颜色。

注: 如果以后要还原默认颜色:

在地址栏中,键入 about:config 然后按 进入 返回 .

这个 关于:配置 “这可能会使您的保修失效!” 可能会出现警告页面。点击 I'll be careful, I promise!I accept the risk! 继续 关于:配置 页。

进入 browser*color 在搜索字段中。

右键单击按住 Ctrl键 当您单击 用户集已修改 偏好。

选择 Reset .

revl 6 年前

一个更简单的方法,也会产生更美观的结果,是要求火狐使用GTK方案的轻版本来呈现表单输入。

为此,请导航到 about:config ,请保证单击“我接受风险!”然后创建一个新的字符串参数 widget.content.gtk-theme-override . 使用您最喜欢的“灯光”主题的名称作为值(在我的例子中,它是 Yaru )此配置更改将在下次重新启动Firefox后生效。

问题解决了!