forms and colors

[alanjstr]

I just changed my Windows color scheme. Now all of my text boxes and buttons are inheriting those colors. Almost every web designer assumes that they will remain the standard Grey/Black/White.

Any web page I view that has form elements looks weird, including this one.
<a href="http://mywebpages.comcast.net/hotabay1/images/blues.gif"><img src="http://mywebpages.comcast.net/hotabay1/images/blues2.gif" border="2"></a>

In this case, I disagree with the choice to inherit system colors. I've tried to override the settings with userChrome

Code: Select all

input,
textarea {
  color: black !important;
  background-color: white !important;
}

but I'm not having any luck.

[priior]

stupid suggestion.. but worth mentioning..

why dont u specifically change ur window text and background in ur windows theme?

[alanjstr]

stupid suggestion.. but worth mentioning..

why dont u specifically change ur window text and background in ur windows theme?

Basically, if I want the original colors, I have to use the standard Windows Theme. I just changed it away from that. Click the image for a bigger screenshot.

[scratch]

I disagree. I designed my site to match the windows color scheme, so if the form controls didn't, it would look out of place.

[laszlo]

In this case, I disagree with the choice to inherit system colors. I've tried to override the settings with userChrome

Code: Select all

input,
textarea {
  color: black !important;
  background-color: white !important;
}

but I'm not having any luck.

Since your dealing with the content window, you'd have to put this into userContent.css. If it still doesn't work, you could try this:

Code: Select all

input,
textarea {
  -moz-appearance: none !important;
  color: black !important;
  background-color: white !important;
}

[alanjstr]

Code: Select all

input,
textarea {
  -moz-appearance: none !important;
  color: black !important;
  background-color: white !important;
}

Errr. Nope, that didn't do it. Text entry boxes are still blue.

I disagree. I designed my site to match the windows color scheme, so if the form controls didn't, it would look out of place.

Which is why I'm willing to override via userChrome.css. Just because I disagree doesn't mean I'm going to try to persuade them to change it. When they put this into Mozilla, they probably had a reason. Unfortunately, it causes some pages to look weird, and some items very hard to see, because the site designer never took this into consideration. For example, some of the buttons on my Yahoo Mail have the background colors coded by the web page, but the text color is inherited from the OS. So I wind up with white text on a light-blue background.
<img src="http://mywebpages.comcast.net/hotabay1/images/blues3.gif">
The contrast is so low that converting it to a gif wiped the text out.

When I swapped my Windows color scheme, I acknowledged that things wouldn't always look right. Phoenix gives me the opportunity to override those settings.

[laszlo]

Code: Select all

input,
textarea {
  -moz-appearance: none !important;
  color: black !important;
  background-color: white !important;
}

Errr. Nope, that didn't do it. Text entry boxes are still blue.

[...]

Which is why I'm willing to override via userChrome.css. [...]

You have read my last post completely, haven't you?

chrome -> userChrome.css
content -> userContent.css

In case you already tried putting this into userContent.css, forget this post.

[alanjstr]

Code: Select all

input,
textarea {
  -moz-appearance: none !important;
  color: black !important;
  background-color: white !important;
}

Errr. Nope, that didn't do it. Text entry boxes are still blue.

[...]

Which is why I'm willing to override via userChrome.css. [...]

You have read my last post completely, haven't you?

chrome -> userChrome.css
content -> userContent.css

In case you already tried putting this into userContent.css, forget this post.

Ah! I've been so busy playing with user<u>Chrome</u> that I just saw what I wanted to see. That did the trick! Now, I just have to override all my form elements. Thanks!

[alanjstr]

userContent.css. If it still doesn't work, you could try this:

Code: Select all

input,
textarea {
  -moz-appearance: none !important;
  color: black !important;
  background-color: white !important;
}

Ok, my text boxes look great, except for the borders which I will get to. But I can't seem to override the check boxes. DOM Inspector reports that my settings for them have the same weight (257) as the values from forms.css.

Code: Select all

input[type="radio"],
input[type="checkbox"] {
  color: black !important;
  background-color: white !important;
}

Also, do I really need to override -moz-Appearance?

[laszlo]

Ok, my text boxes look great, except for the borders which I will get to. But I can't seem to override the check boxes. DOM Inspector reports that my settings for them have the same weight (257) as the values from forms.css.

That's strange. The !important rule should always give your style the highest weight.

Also, do I really need to override -moz-Appearance?

I don't know if you can style elements in XP that have set this property without overriding it. Just try it.

[alanjstr]

Ok, my text boxes look great, except for the borders which I will get to. But I can't seem to override the check boxes. DOM Inspector reports that my settings for them have the same weight (257) as the values from forms.css.

That's strange. The !important rule should always give your style the highest weight.

Also, do I really need to override -moz-Appearance?

I don't know if you can style elements in XP that have set this property without overriding it. Just try it.

In DOM Inspector, you can twiddle the !important setting. Turning it off on the properties from forms.css seems to take care of it.

http://bugzilla.mozilla.org/show_bug.cgi?id=182589