Re: Styling HTML placeholder attribute

On 21/01/13 23:22, Mounir Lamouri wrote:
> Recently, Gecko moved from a pseudo-class to a pseudo-element [1] for
> multiple reasons.
> First of all, there was a real problem in using a pseudo-class if we
> wanted to show the placeholder while the element is focused and empty.
> For example, ":-moz-placeholder { color: white; }" would give a white
> color the element when the placeholder is visible which means that, when
> focused an empty element, the caret would be white and if the background
> of the element is white, it would make the caret just no longer visible
> putting the user in a situation where it isn't clear whether the element
> has been focused or not.

I agree this isn't clear and I do not easily understand what I was
trying to say here and I might even have mis-described the issue but
everybody ignored that part of my initial email and focused on what I
believed to be a secondary reason: the styling.

I have been advocating the pseudo-class in Gecko and when I realized
that opacity wasn't usable with the pseudo-class I thought of using
::value with :placeholder. I really switched my mind to the
pseudo-element because of that issue [badly] described above.

Let me rephrase it.

With the pseudo-class approach, styling the placeholder color means
styling the input element's color which is the color of the text, thus
the caret of the element.
Therefore, let say there is a pseudo-class named ':placeholder',
something like:
data:text/html,<style>input:placeholder { color: gray; } input {
background: black; color: white; }</style><input placeholder='foobar'>
Will show a gray placeholder but it would actually change the color of
the input to gray when the input shows the placeholder. That means, if
the placeholder is shown while the element is focused, the input will
still use that gray color and the caret will be shown as 'gray'.

This is wrong for two reasons: the user will believe that the
placeholder is actual text in the text field and when he/she will type,
that text he/she believes to be a pre-entered text will be erased and
the color of the text and the caret will change. It is unlikely a good
user experience.

In Gecko, we wrote a [very dirty] workaround for this to make the caret
be black in that situation, planning to switch to the pseudo-element
approach.

However, the described behaviour, as far as I can tell, is per
specification and I do not see a correct way for a pseudo-class approach
to prevent that problem. Nor would a combination of ::value and
:placeholder.

This said, this problem only occurs when you allow the placeholder to be
shown when the element is focused with no value. Given that IE10 doesn't
show the placeholder in that situation, I am not surprised they did not
run into that problem. However, I believe we should allow that kind of
implementations that are the native behaviour on some platforms.

Cheers,
--
Mounir

Received on Thursday, 31 January 2013 11:53:34 UTC