Re: [css-selectors] Empty input selector

On 04/20/2011 01:00 PM, Rudolph Gottesheim wrote:
> Assume the following page:
>
> <!DOCTYPE html>
> <html>
> <head>
> <style>
> input[value=''] { background-color:#f00; }
> </style>
> </head>
> <body>
> <input value="test" />
> <input value="" />
> </body>
> </html>
>
> Why doesn't the second input turn red when you enter something? I assume this is the expected behavior since all browsers
> (well, I tested Chrome 12, IE9 and IE10) behave the same. But is there a reason for that?

Yes. the [value] selector selects on the DOM. When you enter text
into the input field, the value of the input field changes but
the value of the 'value' attribute in the DOM does not change.

You can see this if you paste your testcase into Hixie's DOM viewer:
   http://software.hixie.ch/utilities/js/live-dom-viewer/

> Why isn't there a pseudo class selector for form fields with an empty value?

Probably because either nobody presented a use case for it during
the Selectors 3 cycle, or nobody wanted to implement it. :)

> One use case would be to remove the border from all input fields that have a value so they look just like normal text and to
> add it back on :hover and :focus. This way the screen would look less cluttered when you have many input fields on a page. (If
> that's a good UI or not is another question.. ;)

Ok. I'll add it to the list of things to consider for Selectors 4.

~fantasai

Received on Wednesday, 20 April 2011 20:28:41 UTC