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

Re: Styling HTML placeholder attribute

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 22 Jan 2013 12:09:28 -0800
Message-ID: <CAAWBYDBYuKqYjsY-d1ZO7bLOuv5YjHdjH2P+VznqvUs+zirG4w@mail.gmail.com>
To: Sylvain Galineau <sylvaing@microsoft.com>
Cc: Mounir Lamouri <mounir@lamouri.fr>, www-style list <www-style@w3.org>
On Tue, Jan 22, 2013 at 11:06 AM, Sylvain Galineau
<sylvaing@microsoft.com> wrote:
> [Tab Atkins Jr.:]
>> Ah, good to see FF switched over!  The pseudo-element approach is
>> definitely better.
>>
> Mind elaborating on that assertion?

It's been explored in past threads on the matter.  Basically, a
pseudo-element lets you achieve the intended placeholder appearance in
a more reliable way.

Assuming standard <input> coloration (black text on white background),
we want the placeholder to have gray text.  More generally, we want
the placeholder to be a lighter, less saturated color than the real
text.

Using a :placeholder pseudo-class, the best we can do is set the
'color' property itself to the gray we want.  This works badly when an
author changes the 'background-color' of their input, as the gray may
get set against a background-color that produces insufficient
contrast.  Even if the gray is still sufficient contrast, the author's
desired 'color' might not line up with gray.

Using a ::placeholder pseudo-element, we can instead set 'opacity'
such that it produces the gray we want given typical coloration.  If
the author changes the input's coloring to use different 'color' and
'background-color' values, it will still do what we want, and produce
a lighter, less saturated version of whatever that color is.

So, overall, the pseudo-element has a higher chance of maintaining
accessibility, and of matching the author's intent.

~TJ
Received on Tuesday, 22 January 2013 20:10:15 GMT

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