Re: Styling HTML placeholder attribute

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