High contrast theme Firefox problem

Question

I am using the high contrast inverse theme in 12.04 as I am visually impaired. This generally works great but causes a problem in Firefox as entered text e.g into a Google search is white. As the text background is also white you cannot see what you are typing.

I have read through a good thirty websites with similar issues but thus far nothing works.

I have tried all the settings in Firefox like un-checking "Use System Defaults" as well as manually telling Firefox what colours to use and these setting have absolutely no effect on anything.

Answer 1

If you are willing, you could consider this: Create (or edit) userContent.css using a simple text editor (since it should be a simple text file) in the following path: /home/your_name/.mozilla/firefox/*****/chrome/userContent.css where ****** is the profile unique to each user.

You may also have to create the chrome folder since it most likely will not exist in more recent versions of Firefox.

In that file place the following:

@-moz-document domain(google.com)
{ input { -moz-appearance: none !important; color: #000000 !important; } }

All it does is to force a black font color in input boxes on the google.com site. If you want that code to apply globally, remove the first line and the outer curly brackets.

Please note that chrome and userContent.css are case-sensitive.

Alternatively, you could install the Stylish extension and then browse the gallery of styles available. There is a well attended forum available as well.

The advantage (or disadvantage) of modifying the userContent.css (and userChrome.css) files or using the Stylish extension is that the settings in your stylesheets or in Stylish will have the last word and not the theme. So you can change themes without affecting the way your Firefox looks.

Answer 2

Have you tried altering the userContent.css in Firefox's profile directory?

Create a new file (or edit it if it exists) ~/.mozilla/firefox/your_profile_directory/chrome/userContent.css. Replace your_profile_directory with your profile folder, it will probably look something like cvrat3qh.default.

Copy-paste the following lines in that file:

input[type="text"],
input[type="password"],
textarea
{
  -moz-appearance: none !important;
  background: white;
  color: black;

  border-radius: 5px;
  border: 1px solid #BBB;
  background-color: white;
  padding: 3px;
  color: black;
}

and restart Firefox.

Answer 3

Here is a userstyle for Stylish that implements the CSS fix.

Answer 4

I found that the best way to do this was to take the code block that jeremija provided and paste it into Stylish. It'll change the text color issue on all sites without effecting the Firefox theme and also negate the need to go digging through hidden files trying to find the correct config document.