Re: Styling HTML placeholder attribute

On Jan 23, 2013, at 10:31 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:

> 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 would expect 'color-opacity' to work on anything that had a 'currentColor' value too, since it would be setting the alpha of the color that is used for currentColor. My mindset is more towards thinking about we affect the the 'a' in rgba, hsla, etc. (even if the original color was just rgb, hsl, hex, etc.) than about the opacity property. It amounts to the same thing, but makes me wonder what "apply only to text" would mean when currentColor exists as a concept. Anything that uses color can take on the text color.

I'd even push it further, and suggest an option 6: add a new color value of 'a(<nonnegative-number-less-than-or-equal-to-one>)' that multiplied against the previously cascaded color. So, for instance: 

input:placeholder { 
   color: rgb(255, 255, 0);
   color: a(0.5);
}

Would be equivalent to 

input:placeholder { 
   color: rgba(255, 255, 0, 0.5);
}

Then we could apply opacity to any color anywhere (in text-shadow, box-shadow, border-color, background-color, etc.).

Received on Thursday, 24 January 2013 06:07:07 UTC