[whatwg] Placeholder option for text input boxes

[Garrett Smith]

On Sun, Oct 5, 2008 at 1:07 PM, L. David Baron <dbaron at dbaron.org> wrote:
> 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.
>

It fulfills a simple use case. That is, a placeholder as an image.

<input type='search' style='placeholder-background: url(bang.gif) no-repeat;'>

It does not get in the way of the placeholder attribute or property
(doesn't prevent progress).

What other use case did you have?

> 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); }

content:[1]

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

The idea of :value for a property is useful.

The attr is supposed to represent the attribute. If you want to select
a property, a property selector would seem less ambiguous.

content: property(placeholder);

[1]http://www.w3.org/TR/CSS2/generate.html#content

Garrett

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