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

Re: Styling HTML placeholder attribute

From: L. David Baron <dbaron@dbaron.org>
Date: Thu, 24 Jan 2013 13:30:31 -0800
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: 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: <20130124213031.GA14454@crum.dbaron.org>
On Wednesday 2013-01-23 10:31 -0800, Tab Atkins Jr. wrote:
> Here are the options that we've come up with so far:
> 
> 1. Add nothing new, use a :placeholder pseudoclass.  Specify that UA
> styles for placeholders are roughly "input:placeholder { color: #999;
> }".
> 
> 2. Add nothing new, use a ::placeholder pseudo-element.  Specify that
> UA styles for placeholders are roughly "input::placeholder { opacity:
> .5; }".
> 
> 3. Add a :placeholder pseudoclass, and revive the ::value
> pseudo-element that once existed in CSS3 UI.  Specify that UA styles
> for placeholders are roughly "input:placeholder::value { opacity: .5;
> }".

I think I'm probably in favor of #3 at this point.

I don't think it's excess complexity, and I expect the ability to
style the thing inside the input element will be useful for other
reasons (including avoiding some of the interaction with native
theme ('appearance') drawing that occurs when styling border or
background of the input itself).

> 4. Add a new 'color-opacity' or 'foreground-opacity' property, use a
> :placeholder pseudoclass.  Specify that UA styles for placeholders
> are roughly "input:placeholder { foreground-opacity: .5; }".
> 
> 5. Adopt SVG's fill/fill-opacity/stroke/stroke-opacity properties,
> specifying that they only apply to text, and use a :placeholder
> pseudoclass.  Specify that UA styles for placeholders are roughly
> "input:placeholder { fill-opacity: .5; }".

I think pursuing #5 is a worthy project, but I think we need a
solution for placeholder styling sooner than #5 will yield results.

-David

-- 
𝄞   L. David Baron                         http://dbaron.org/   𝄂
𝄢   Mozilla                           http://www.mozilla.org/   𝄂
Received on Friday, 25 January 2013 00:29:30 GMT

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