Re: Styling HTML placeholder attribute

On Wed, Jan 23, 2013 at 10:06 PM, Brad Kemper <brad.kemper@gmail.com> wrote:

> 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);
> }
>

Maybe it's a bit more elegant if we extended opacity and have it target
what part of the element you want it to apply.
For instance:

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


In addition to fill, you could also specify "border", "background" or
"shadow"

This is also how you will specify blending. See proposal:
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#mix-blend-mode



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