Matching an empty input box using CSS
In modern browsers you can use :placeholder-shown
to target the empty input (not to be confused with ::placeholder
).
input:placeholder-shown {
border: 1px solid red; /* Red border only if the input is empty */
}
More info and browser support: https://css-tricks.com/almanac/selectors/p/placeholder-shown/
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)