Last modified: 2012-09-27 16:07:49 UTC
Since Firefox 15 the placeholder text in the search bar of skin vector is black instead of gray. Solution: Add div#simpleSearch input:-moz-placeholder { color: #999999; } to skins/vector/screen.css https://developer.mozilla.org/en-US/docs/CSS/:-moz-placeholder
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
