[css-selectors] Empty input selector

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? Why 
isn't there a pseudo class selector for form fields with an empty value?

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

Received on Wednesday, 20 April 2011 20:01:29 UTC