RE: Styling HTML placeholder attribute

Yes, you can transition from the 'unmodified' state color - or whatever we end up calling it - to
the regular text input color but you're not fading to nothing before the first keystroke as Philip's
scenario requires it. So if you have:

input:unmodified {
 color:<some gray>;
 transition: color 0.2s;
}
input {
 color:black;
}

Then you'll going from gray to black when the user takes the control out of the unmodified state. It actually 
works, imo; but if you want to fade out to transparent and then instantly switch to black on the first 
keystroke then you'd some another intermediate state. Hence Philip's claim that you want a pseudo-element; but 
even then all your animations are dead as soon as the browser sets display:none on it. 

I don't consider mimicking the exact behavior of popular jQuery plug-ins to be a design goal though. 

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

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/

Received on Wednesday, 23 January 2013 23:41:16 UTC