Page MenuHomePhabricator

placeholder text color in search bar in Firefox 15 is black instead of gray
Closed, ResolvedPublic

Description

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


Version: 1.20.x
Severity: minor

Details

Reference
bz39793

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 12:50 AM
bzimport set Reference to bz39793.

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.

  1. 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