W3C home > Mailing lists > Public > www-style@w3.org > January 2013

Re: Styling HTML placeholder attribute

From: Lea Verou <lea@w3.org>
Date: Thu, 24 Jan 2013 01:24:17 +0200
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, Brad Kemper <brad.kemper@gmail.com>, Sylvain Galineau <sylvaing@microsoft.com>, Mounir Lamouri <mounir@lamouri.fr>, www-style list <www-style@w3.org>
Message-Id: <1ABBBD05-FD74-4943-B49B-99489652B8F4@w3.org>
To: Philip Walton <philip@philipwalton.com>
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#leahttp://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:24:27 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:04 GMT