Re: Styling HTML placeholder attribute

On Jan 24, 2013, at 1:30 PM, "L. David Baron" <dbaron@dbaron.org> wrote:

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

But not a fan of #4? It has more limited scope than #5, and so could maybe get done faster. It would just be interacting with 'color' and 'currentColor', and not with stroke, or with how 'fill' and 'color' are supposed to interact. 

Received on Friday, 25 January 2013 04:08:05 UTC