Matching an empty input box using CSS

css input css-selectors
Sjoerd picture Sjoerd · Sep 1, 2010 · Viewed 116.3k times · Source

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

lukmdo picture lukmdo · Jun 26, 2012

If only the field is required you could go with input:valid

#foo-thing:valid + .msg { visibility: visible!important; }      
 <input type="text" id="foo-thing" required="required">
 <span class="msg" style="visibility: hidden;">Yay not empty</span>

See live on jsFiddle

OR negate using #foo-thing:invalid (credit to @SamGoody)

Related questions

How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Is there any way to change input type="date" format?

I'm working with HTML5 elements on my webpage. By default input type="date" shows date as YYYY-MM-DD. The question is, is it possible to change its format to something like: DD-MM-YYYY?

Read More
How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <…

Read More