Re: Styling HTML placeholder attribute

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> 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 ✿ @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> 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/
>
>
>