css - Is an input field valid while is empty? -

i've been experimenting css pseudo classes , pseudo elements , discover have not been able around.

consider following html input field:

<input type="number" value="1" min="1" max="1000" step="1" pattern="\d" /><span></span> 

in order achieve 3 states: empty, valid , invalid. i'm using ::after pseudo element (applied span adjacent input) add checkmark when value of filed valid, , x when value invalid.

i'm using pseudo classes :valid , :invalid , seems when input field empty (value="") state valid.

the css in question follows:

.v3_forms input[value=""] + span::after {     content: ""; } .v3_forms input:valid + span::after {     content: "\2713";     color: limegreen; } .v3_forms input:invalid + span::after {     content: "x";     color: #ce0000; } 

for i'm able tell, after clearing value in browser, second css rules takes precedence, though specificity same.
tested selectors here: specificity calculator , seems attributes , pseudo classes have same weight.

an empty string is, default, valid value:

user agents should allow user set value empty string *.

if want require value field, need add required attribute:

.v3_forms input[value=""] + span::after {      content: "";  }  .v3_forms input:valid + span::after {      content: "\2713";      color: limegreen;  }  .v3_forms input:invalid + span::after {      content: "x";      color: #ce0000;  }

<div class="v3_forms">  <input type="number" value="1" min="1" max="1000" step="1" pattern="\d" required /><span></span>  </div>

this addresses specific example in question, same hold true of <input /> elements accept user input.

*see whatwg reference.