input:valid sempre attivo

[techno]

<style>
.form-light:focus ~ label,
.form-light:valid ~ label
{
    transform: translateY(-50%);
    font-weight: 800;
    color: rgb(88, 133, 255);
    font-size: .9em;
}
</style>

<input id="password" name="password" type="password" class="l50 form-light" value="" />
<label for="password">password</label>
<span class="btm-input"></span>
<span class="light-input"></span>

non capisco il perche il campo input è sempre nello stato di valid

[Vincent.Zeno]

https://www.w3schools.com/cssref/sel_valid.asp

ho fatto prove con un campo email e la validazione lascia decisamente e desiderare.
un campo password che cosa ha da validare nel suo formato generico?
potrebbe andar bene vuoto, con o senza caratteri speciali/lettere/numeri.
per cui... qualunque cosa ci sia dentro, anche il nulla, andrà bene.

credo abbia un senso utilizzarlo con un supporto js

[KillerWorm]

EDIT: quoto Vincent e aggiungo,

tuttalpiù potresti mettere un attributo required nel tag in modo che risulti valido quando viene compilato

[techno]

Forse non mi sono spiegato bene, anche se i campi input sono vuoti non compilati perché me li vede con :valid?
Mi serve sapere se i campi input sono stati compilati in css si può fare? O devo per forza supportarli con javascript?

[KillerWorm]

Ripeto:

tuttalpiù potresti mettere un attributo required nel tag in modo che risulti valido quando viene compilato

[techno]

Ok provo con required