RE: Styling HTML placeholder attribute

Not sure what you expect from your Firefox example; once a control has focus it should lose its placeholder state as soon as the user types, right? So you’d be transitioning from input:placeholder to input:focus:placeholder until the latter stops matching and then you’re going to something else?

From: Philip Walton [mailto:philip@philipwalton.com]
Sent: Wednesday, January 23, 2013 4:14 PM
To: Lea Verou
Cc: Tab Atkins Jr.; Brad Kemper; Sylvain Galineau; Mounir Lamouri; www-style list
Subject: Re: Styling HTML placeholder attribute

FWIW, I'm not necessarily advocating that placeholders should be transition-able, I was merely pointing out a possible reason in favor of pseudo-elements other that just opacity.

Lea, building off your example, here was the point I was trying to make about the differences with transitions between pseudo classes vs elements.

Firefox version w/ pseudo-class (notice when you delete text the transition is messed up)
http://dabblet.com/gist/4616098


Webkit version w/ pseudo-element (this is much nicer and more intuitive IMO)
http://dabblet.com/gist/4616106


And Sylvain, I agree 100% that mimicking the exact behavior of popular jQuery plug-ins should not be a design goal. It was just an example.

On Wed, Jan 23, 2013 at 3:43 PM, Lea Verou <lea@w3.org<mailto:lea@w3.org>> wrote:
Ah, I see, if you set input:placeholder { transition: .2s color; } then you'd only get a transition only when the placeholder shows and not when it disappears, which is far more common. Is that it?
If so,
a) Is it that significant?
b) It could be solved via a CSS animation, especially if we introduce something like color-opacity. That however will be problematic when the user changes the effect, they'd have to overwrite the animation too. :(


Lea Verou
W3C developer relations
http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou





On Jan 24, 2013, at 01:35, Philip Walton wrote:


Sorry if I wasn't clear. I was implying that the transition effect wouldn't be possible unless it were a pseudo-element.

But I do take your point that a downside of allowing users to set transitions is it also allows them to set anything they want (including borders and backgrounds like in your example).

On Wed, Jan 23, 2013 at 3:24 PM, Lea Verou <lea@w3.org<mailto:lea@w3.org>> wrote:
AFAIK, that’s how most browsers implement placeholders today (UX-wise), and it has nothing to do with whether they use pseudo-classes or pseudo-elements.
Why can't that styling be done in CSS? It’s just a color change. Yes, it's easier with opacity because it keeps the same color, but that only holds true for today and it's not a placeholder-specific problem, as I detailed in my previous email.

Another thing: Using a pseudo-element has serious problems when padding is involved [1]. Most inputs in real-life websites have padding > 0. Setting a different background or border for the placeholder state is a reasonable use case and shouldn't be this hard to do properly.

IMO, using a pseudo-element & opacity for this looks like a hack trying to circumvent a limitation of the language (setting the color alpha individually) that should probably be addressed directly. I've read the entire thread carefully and I didn't see any other argument for using a pseudo-element besides that.

[1]: http://dabblet.com/gist/4615583


Lea Verou
W3C developer relations
http://w3.org/people/all#lea ✿ http://lea.verou.me<http://lea.verou.me/> ✿ @leaverou





On Jan 24, 2013, at 00:47, Philip Walton wrote:



On Wed, Jan 23, 2013 at 2:24 PM, Lea Verou <lea@w3.org<mailto:lea@w3.org>> wrote:

2) Is there any other use case for a pseudoelement apart from opacity? I can't see any, but my imagination might be limited. :)

Before most browsers supported placeholders, it was pretty common to see jQuery plugins polyfill this behavior. A common effect was to have the placeholder start at a gray color, fade out when you focused on the element, and then disappear completely as soon as you typed a single character.

This would be impossible to achieve in pure CSS unless the placeholder were a pseudo-element.

Here's a demo plugin that's pretty similar to what I used to see a lot:
http://jsfiddle.net/6HQWv/