Re: Styling HTML placeholder attribute

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 UTC