Czy pole wejściowe jest prawidłowe, gdy jest puste?

Question

Eksperymentowałem z pseudo klasami i pseudo elementami css i odkryłem coś, czego nie byłem w stanie obejść.

Rozważmy następujący pole wprowadzania HTML:

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

W celu osiągnięcia 3 stany: pusta, prawidłowe i nieprawidłowe. Używam pseudo elementu :: after (zastosowanego do zakresu przylegającego do wejścia), aby dodać znacznik wyboru, gdy wartość pola jest poprawna, oraz X, gdy wartość jest niepoprawna.

Używam pseudo klas: valid i: invalid i wydaje się, że gdy pole wejściowe jest puste (value = ""), jego stan jest również ważny.

CSS, o którym mowa jest w następujący sposób:

.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; 
} 

Za co jestem w stanie powiedzieć, po usunięciu wartości w przeglądarce, drugi CSS ma pierwszeństwo, choć specyfika jest taka sama .
Przetestowałem selektory tutaj: specificity calculator i wydaje się, że atrybuty i pseudo klasy mają tę samą wagę.

Answer 1

Pusty ciąg jest domyślnie prawidłową wartość:

klienckie powinny pozwolić użytkownikowi na ustawienie wartości do pustego ciąg *.

Jeśli chcesz, aby wartość dla tej dziedzinie, trzeba dodać atrybut required:

.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>

To rozwiązuje konkretny przykład w swoim pytaniu, ale to samo będzie zachowywać wartość true dla dowolnego z elementów <input />, które akceptują dane wprowadzone przez użytkownika.

* Zobacz numer referencyjny whatwg.