RE: Styling HTML placeholder attribute


[Tab Atkins Jr.:]
> 
> It's been explored in past threads on the matter.  
Links? I don't recall this being settled one way or the other.

> Basically, a pseudo-
> element lets you achieve the intended placeholder appearance in a more
> reliable way.

Can you elaborate on scenarios that are less reliable in pseudo-class based
implementations? Given that we have implementations, examples are best.

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

I don't follow this reasoning. If :placeholder is a state of the element
what prevents the author from using the exact same style he would otherwise
apply to the pseudo-element? 

Again, it would help to provide an example of the problem.

> 
> ~TJ

Received on Tuesday, 22 January 2013 20:23:47 UTC