fix placeholder attribute in input field to behave according to spec. #86

Closed
wants to merge 2 commits into from

4 participants

@chadbaudoin

As you can see in my comments in normalize.css:

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.

Spec gist: User agents should present this hint to the user...when the element's...control is not focused.

You can see the discussion here: http://code.google.com/p/chromium/issues/detail?id=106714

@chadbaudoin chadbaudoin fixing issue with chrome placeholder not removing text when input foc…
…used on. the new behavior matches spec html5 placeholder.
3bf436c
@jonathantneal
Collaborator

I think this is good if we strip the input

@necolas
Owner

Included in 2691e7a

@necolas necolas closed this Mar 9, 2012
@TMMC

Now firefox acts the same as chrome... its' started IMHO: FF is resampling to chrome on purpose... and chrome sux in many ways :/

@TMMC TMMC commented on the diff Sep 22, 2012
normalize.css
@@ -477,6 +477,16 @@ input[type="search"]::-webkit-search-cancel-button {
}
/*
+* The placeholder attribute in Chrome does not work to spec. This makes the text transparent
+* on focus to work like Firefox, Safari, IE and the spec.
+* Spec gist: User agents should present this hint to the user...when the element's...control is not focused.
+* You can see the discussion here: http://code.google.com/p/chromium/issues/detail?id=106714
+*/
+:focus::-webkit-input-placeholder {
+ color: transparent;
+}
+
@TMMC
TMMC added a note Sep 22, 2012

I would add the lines below:

:focus:-moz-placeholder { /* as it started to work as Chrome */
color: transparent;
}

:focus:-ms-input-placeholder { /* just to be sure, I'm not able to check IE */
color: transparent;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@npmcomponent npmcomponent pushed a commit to npmcomponent/necolas-normalize.css that referenced this pull request Jan 6, 2014
@jonathantneal jonathantneal 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 necolas/normalize.css#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
2691e7a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment