I think in this case it would be best to keep the native coloring for interactive elements (at least until we design or own form elements compeltely, e.g. with a Twitter Bootstrap-like approach).

That way it is consistent across the web for Firefox users (button style, input color, focus border, text selection etc.)

Native coloring is good.

But since Firefox 15 the existing

div#simpleSearch input { color: black; }

overwrites the placeholder color, too.

How enable native color for the placeholder for Firefox 15 again?

Possible solutions:

1. remove div#simpleSearch input { color: black; }

I think this is possible because there is still

div#simpleSearch { color: black; }

But maybe this is necessary for browsers without placeholder support.

2. add div#simpleSearch input:-moz-placeholder { color: GrayText; }

GrayText is deprecated: https://developer.mozilla.org/en-US/docs/CSS/color_value#System_Colors

(In reply to comment #2)

GrayText is deprecated:
https://developer.mozilla.org/en-US/docs/CSS/color_value#System_Colors

System colors have been deprecated in favor of the new CSS3 UI ‘appearance’ property [1] and this property then was dropped [2].

[1] http://www.w3.org/TR/2011/REC-css3-color-20110607/#css2-system
[2] http://www.w3.org/TR/css3-ui/#changes-list

I can not find any problems without

div#simpleSearch input { color: black; }

even for browsers without placeholder support (IE8).

By the way, in skins/vector/screen.css #firstHeading has

padding-top: 0

two times.

[ Priority adjustment: trivial -> minor as it requires a little CSS and best practice analysis, adding Matma Rex as cc, it could be interested by this bug. ]

Per [1], it is also possible to style the placeholder in IE.

I submitted a patch for Firefox & IE with an explanation to gerrit: https://gerrit.wikimedia.org/r/#/c/25506/

[1] http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css/2610741#2610741