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

Re: Styling HTML placeholder attribute

From: Rik Cabanier <cabanier@gmail.com>
Date: Thu, 24 Jan 2013 09:48:39 -0800
Message-ID: <CAGN7qDCYaTnjf0CRGAy5_gUj9gf4W-3CHHcXv1KW+Yk+92cxvQ@mail.gmail.com>
To: Brad Kemper <brad.kemper@gmail.com>
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, Sylvain Galineau <sylvaing@microsoft.com>, Mounir Lamouri <mounir@lamouri.fr>, www-style list <www-style@w3.org>
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.).
>
>
>
>
Received on Thursday, 24 January 2013 17:49:06 GMT

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