Skip to content

Commit

Permalink
Add placeholder color normalization
Browse files Browse the repository at this point in the history
The browser-defined style for placeholder text color is overwritten by style for input elements in Firefox. Adding :-moz-placeholder style overrides that, bringing Firefox inline with other browsers.

@mathiasbynens made a test case for this @ https://tinker.io/be2f2

This change improves consistency of placeholder style between Chrome, Safari, and Firefox browsers.
  • Loading branch information
Jonathan Neal committed Mar 9, 2012
1 parent 664a7a7 commit 49392e9
Showing 1 changed file with 14 additions and 0 deletions.
14 changes: 14 additions & 0 deletions normalize.css
Expand Up @@ -468,6 +468,20 @@ input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}

/*
* Improves consistency of placeholder style between Chrome, Safari, and Firefox browsers
*/

::-webkit-input-placeholder
{

This comment has been minimized.

Copy link
@mathiasbynens

mathiasbynens Mar 9, 2012

Contributor

Isn’t this already the default color in WebKit? Or has this declaration block been added purely for clarity?

Update: Never mind, WebKit uses darkGray which converts to #a9a9a9. Gecko uses GrayText (open resource://gre-resources/forms.css in Firefox to confirm this) which is an OS-specific value. (On OS X Lion, it seems to map to #7f7f7f.)

color: #AAA;
}

:-moz-placeholder
{
color: #AAA;
}

/*
* Removes inner padding and border in FF3+
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
Expand Down

4 comments on commit 49392e9

@necolas
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The test case linked to in the commit is for a different issue.

I made a test case showing how this change doesn't address the core Firefox bug
https://tinker.io/e34a2

Any selector with a higher specificity will cause the bug to resurface.

So this change needs to go and I think we should consider reverting the last 5 commits because the current Safari/WebKit placeholder-focus behaviour looks set to become the norm: https://bugzilla.mozilla.org/show_bug.cgi?id=673873 and is allowed in the spec: http://lists.w3.org/Archives/Public/public-html-diffs/2011Oct/0174.html

@jonathantneal
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about the firefox placeholder color (being overwritten by the input color)? That's a bug. Should we fix that?

@necolas
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's what I'm talking about too. I've already shown, in the above test case, that we can't fix that Firefox bug. It's something for them to fix in the browser.

@jonathantneal
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't have nice things.

Please sign in to comment.