[whatwg] Placeholder option for text input boxes

L. David Baron dbaron at dbaron.org
Sun Oct 5 13:07:45 PDT 2008

On Sunday 2008-10-05 12:20 -0700, Garrett Smith wrote:
> But what if the designer wants to use an image?
> <input type="search" placeholder="ybang.gif">
> Would display the text:
> "bang.gif"
> - not the binary resource of the image. In some cases, designers or
> marketing will want an image there.  Maybe some ui css would be a
> possibility:
> placeholder-background: url(bang.gif) no-repeat center;
> This could be implemented by browsers so developers could have a
> placeholder and, where supported, a placeholder-background.

It seems like this belongs on the selector side of CSS, not the
property side.  It's not clear to me why you chose to duplicate only
the background-* properties, but no others.

I think something more like the following would work better:
  input[:value=""] { background: url(bang.gif) no-repeat center; }
perhaps with a default of:
  input[:value=""] { contents: attr(placeholder); }

(The value attribute doesn't dynamically reflect the value of the
input.  However, it seems reasonable to want to style based on the
current value; we already have the :checked pseudo-class for that
for some form controls.)


L. David Baron                                 http://dbaron.org/
Mozilla Corporation                       http://www.mozilla.com/

More information about the whatwg mailing list