Matching an empty input box using CSS

Question

How do I apply a style to an empty input box? If the user types something in the input field, the style should no longer be applied. Is this possible in CSS? I tried this:

input[value=""]

Answer 1

There is no selector in CSS which does this. Attribute selectors match attribute values, not computed values.

You would have to use JavaScript (e.g. http://dorward.me.uk/tmp/label-work/ )

Answer 2

input[value=""] will not work with

<input type="text" />

but worked for me in chrome with

<input type="text" value="" />

But the style will not change as soon as someone will start typing. So you should use js for that.

Answer 3

I'm not sure which language you're working with or how you're applying the cascading style sheet. A few examples using DIV's below

The Form

<form action="Some_Page" method="Post">
<input type="text" name="TextBox" value="" />
</form>

Vb/ASP

<% if request.form("TextBox") = "" then %>
<div>Some_Data</div>
<% else %>
<div class="Some_CSS">SomeData</div>
<% end if %>

PHP

if ($_POST['TextBox']==""
{
<div>Some_Data</div>
} else {
<div class="Some_CSS">SomeData</div>
}