Skip to content
Browse files

Addresses placeholder text remaining visible on focus in Chrome

The placeholder attribute in Chrome does not work to spec. This makes the text transparent on focus to work like Firefox, Safari, and the spec. Credit goes to @chadbaudoin for bringing this up in his pull request #86 and this Chrome bug is further documented at http://code.google.com/p/chromium/issues/detail?id=106714  and my own test is at https://tinker.io/be2f2/1
  • Loading branch information...
1 parent 79e2c16 commit 2691e7ab14682dc8f9e942456887df0e35804087 @jonathantneal jonathantneal committed Mar 9, 2012
Showing with 8 additions and 0 deletions.
  1. +8 −0 normalize.css
View
8 normalize.css
@@ -477,6 +477,14 @@ input[type="search"]::-webkit-search-cancel-button {
}
/*
+ * Addresses placeholder text remaining visible on focus in Chrome
+ */
+
+:focus::-webkit-input-placeholder {
+ color: transparent;
+}
+
+/*
* Removes inner padding and border in FF3+
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
*/

2 comments on commit 2691e7a

@necolas
Owner
necolas commented on 2691e7a Mar 9, 2012

Worth noting that this is marked as WontFix by the Chromium project and we'll have to keep an eye on what other vendors do with regards to this behaviour.

@mathiasbynens

FWIW, Firefox is working on matching Chrome and Safari’s behavior. https://bugzilla.mozilla.org/show_bug.cgi?id=673873

Please sign in to comment.
Something went wrong with that request. Please try again.