Re: Styling HTML placeholder attribute

On Tue, Jan 22, 2013 at 4:38 PM, Sylvain Galineau
<sylvaing@microsoft.com> wrote:
> [Tab Atkins Jr.:]
>> On Tue, Jan 22, 2013 at 1:41 PM, Sylvain Galineau <sylvaing@microsoft.com>
>> wrote:
>> > Sorry, I still don't follow. If the author sets his inputs' background
>> > to black we currently expect her to also change the foreground color
>> > accordingly in order to make users' input visible as they type. I
>> > don't get why it is OK to require her to do that for the stuff the
>> > user will actually type in but it's somehow too large a burden for
>> > placeholder text that we need a dedicated pseudo-element?
>>
>> You're missing my point.  In the pseudo-element scenario (using opacity),
>> you get color-matching and decent contrast *automatically*, without the
>> author having to explicitly provide anything.  That's the benefit I'm
>> pointing to here.
>
> I got it the first time. Authors are expected to adjust their foreground color
> to be compatible with their background color for all elements. I don't think
> it's unreasonable for them to do the same with their placeholder styling whenever
> they use their own control color scheme *and* placeholder text. Adding a
> pseudo-element - objects which are generally expected to handle a lot more
> than opacity - just to make this one UA stylesheet rule more likely to survive
> seems like overkill.
>
> Said differently, I'd much prefer this one scenario to be one of many use-cases
> suggesting a pseudo-element.
>
> In addition, a pseudo-element would still not cover some scenarios authors
> will request e.g. transitions between the placeholder and input states.

Has anyone requested that?  It seems slightly weird to have text fade
out underneath the text you're currently typing.

However, I'm sympathetic to the desire for more value out of the
placeholder.  In one of the earlier threads that I linked, you
suggested we use the old specification that <input> exposes a ::value
pseudo-element, and combine that with a :placeholder pseudo-class.
That would achieve the exact same thing, while offering more power, by
building the same functionality out of more basic functionality.


>> > There are other issues e.g. as it presumably overlays above the
>> > control the opacity set on the pseudo-element will also affect the
>> > underlying background color the author has chosen which may not be what
>> she wanted.
>>
>> The background color is set on the element itself, not the pseudo inside
>> of it.
>
> If a) the placeholder pseudo renders above the element's background and b) its
> default background color is the initial transparent value then your UA stylesheet
> rule will also affect the background color specified by the author for the element.

I still don't understand what you're trying to say here.  The UA
stylesheet rules are assumed to be something like:

input[type='text'] { color: black; background: white; }
input[type='text']::placeholder { opacity: .5; }

The placeholder's background is transparent, so the opacity doesn't
affect anything.  The input's background isn't affected by a child's
opacity in any case.  Can you be more specific about what you see
happening?

~TJ

Received on Wednesday, 23 January 2013 01:41:08 UTC