4

I have following code in my $HOME/.mozilla/firefox/XXXXXXXX.default/chrome/userContent.css:

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

The purpose is to have input fields and text areas always black on white color. My desktop theme is dark and without this hack, firefox would display input and text area black text on dark gray backround, which is pretty much unreadable.

This works well for most websites, but some websites are still displayed as before (black text on gray background). For example this website.

I have installed dom inspector and verified that the element is of type input. But why then are my css settings ignored for this site?

SUBQUESTION:

Is there some documentation/manual, where these configuration options are explained? i.e. how do I know the keyword is background-color and not background? Also, what else can I configure other than input and textarea ?

4
  • 1
    Is that the box next to "Change SLA level:"? Instead of background-color: rgb(255, 255, 255) !important; could you try background: #fff !important; – DK Bose Jun 9 '14 at 6:30
  • @DK Bose - changing to background:#fff !important; makes no difference. The input on the website is still black on gray. – Martin Vegter Jun 9 '14 at 7:57
  • Side note: /home/$HOME is not a valid path, since $HOME begins with /home itself. – hellodanylo Jun 9 '14 at 14:36
  • @SkyDan - of course you are right. Thanks, I have corrected it it. – Martin Vegter Jun 9 '14 at 17:30
6
+100

The problem is that inputboxes are rendered defaultly by the operating system, not by the css-stylesheets. You can disable that by a Gecko-specific non-standard CSS property called -moz-appearance. Use it like this:

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

Now, all your inputboxes where rendered by CSS.

SUBQUESTIONS:

Is there some documentation/manual, where these configuration options are explained?

What else can I configure other than input and textarea ?

Everything, you want, there is also another file called userChrome.css (in the same folder) where you can customize the look of the user interface.

How do I know the keyword is background-color and not background?

  • background-color: Sets the background color of an element. Examples:

    background-color:red;
    background-color:#0000FF;
    background-color:rgb(255,0,255);
    
  • background: Sets all the background properties in one declaration. Examples:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.