[whatwg] Customize HTML5 forms placeholder style

[Dean Edwards]

On 22 February 2010 15:11, Boris Zbarsky <bzbarsky at mit.edu> wrote:
> On 2/22/10 6:08 AM, Dean Edwards wrote:

>> There is a small chance that it could break some pages I guess.
>
> So why is it worth it, then?

I was agreeing with you. That's why I suggested :no-value.

>> I always wanted a pseudo-class that could match<input>  with no value.
>> Extending :empty is probably a bad idea but something like :no-value
>> would be useful.
>
> I'd be fine with :no-value, I think, though it could easily be misused due
> to unexpected situations when it happens (e.g. a text input that I'm typing
> in and delete all the text but am about to type more text is :no-value,
> right?).
>

Yes, I think it should be live. As soon as you delete the text then
the pseudo-class applies. It would be similar to :checked.

As Tab Atkins pointed out it makes styling placeholders doable (but
not as nice as a dedicated pseudo-class):

input[placeholder]:no-value:not(:focus) {
}

It would be nice to use with required too:

input[required]:no-value {
  border-color: red;
}

It's a shame that we can't have generated content for <input> elements
because I'd love to be able to do this:

input[required]:no-value:after {
  content: "*required";
  vertical-align: super;
  color: red;
}

But you can't have everything. ;)

-dean