Can't select empty input with input[value=""]?

Question

I'm trying to mark required (and empty inputs) like this

input:required {
  border: 1px solid green;
}
input[value=""]:required {
  border: 1px solid red;
}

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

<input type="text" value="Not empty" required>

It seems to work, but once you set a value to the input, it still marked

I think it's answered here: http://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css — lpg, Nov 30 '15 at 15:21
See my answer [here](http://stackoverflow.com/a/34001991/4768433). — Shaggy, Nov 30 '15 at 15:25

score 0 · Answer 1 · answered Nov 30 '15 at 15:19

0

If you dont mind using JavaScript you could use an if-statement to give a class based on whether or not the input contains text. then use you CSS on those classes.

answered Nov 30 '15 at 15:19

Mister Verleg

4,053
5
43
68

1

I know, that way it would be done a while a go, but just curious why i doesnt work – Toni Michel Caubet Nov 30 '15 at 15:21
now Im curious too.. – Mister Verleg Nov 30 '15 at 15:23

Can't select empty input with input[value=""]?

1 Answers1