Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Fonts are white even if i set them as black explicitly (only in input boxes)

more options

Hi, my problem is this :

In all the input boxes (just like these in which i'm writing) the font is white , just as the background and it makes text invisible (i have to select it to be able to read it). If i manually set the colors of background and text, then i dont see boxes and buttons (they turn to the same color of the background, and it makes them invisible). All this is annoying , is there some fix?

PD: I use reverse desktop theme, but it is not like i'm going to change my desktop to make firefox work, i'd change my browser rather than that.

Hi, my problem is this : In all the input boxes (just like these in which i'm writing) the font is white , just as the background and it makes text invisible (i have to select it to be able to read it). If i manually set the colors of background and text, then i dont see boxes and buttons (they turn to the same color of the background, and it makes them invisible). All this is annoying , is there some fix? PD: I use reverse desktop theme, but it is not like i'm going to change my desktop to make firefox work, i'd change my browser rather than that.

Modified by Localhost-29A

Chosen solution

Sorry for the confusion. To make this work on web pages you need to place the code in the userContent.css file without the @namespace line

Add code to the userContent.css file.


button, input, select, select > input[type="button"], textarea {
  -moz-appearance: none !important;
  background-color: red !important;
}

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

See also this article about @-moz-document for website specific code:

Read this answer in context 👍 1

All Replies (8)

more options

Give this a look at;

NoSquint {web link} NoSquint allows you to adjust the text-only and full-page (both text and images) zoom levels as well as color settings both globally (for all sites) and per site.

more options

It doesn't change input boxs' (places in which you can write) text fonts.

Modified by Localhost-29A

more options

If you use a dark theme on your Linux distribution then you probably need to use code in userChrome.css to either modify the text color or the background color to black or dark gray. You can leave out selectors that you do not need.

Add code to the userChrome.css file below the default @namespace line.


@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

button, input, select, select > input[type="button"], textarea { color: black !important; }

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

Modified by cor-el

more options

@cor-el what you say would fix my problem but i edit that file manually and nothing happens, then i tried with ChromeEdit Plus and nothing happened neither. I even changed background-color but it makes no effect

more options

You can add the -moz-appearance:none!important; rule to see if that makes it work. You may have to add other style rules to make the button appear properly.

more options

I've tried now this: @namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); body {

   -moz-appearance:none !important;
   background-color: red !important;

}

And without !important too and nothing changes, in any page.

more options

Chosen Solution

Sorry for the confusion. To make this work on web pages you need to place the code in the userContent.css file without the @namespace line

Add code to the userContent.css file.


button, input, select, select > input[type="button"], textarea {
  -moz-appearance: none !important;
  background-color: red !important;
}

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

See also this article about @-moz-document for website specific code:

more options

That will do the trick, thanks :)!