Correspondance d'une boîte de saisie vide en utilisant CSS

Question

Comment appliquer un style à une zone de saisie vide? Si l'utilisateur tape quelque chose dans le champ de saisie, le style ne devrait plus être appliqué. Est-ce possible en CSS? J'ai essayé ceci:

input[value=""]

Answer 1

Je suis étonné par les réponses que nous avons des attributs clairs pour obtenir des cases de saisie vides, regardez ce code

/*case vide*/
input:empty{
    border-color: red;
}
/*case avec une valeur*/
input:not(:empty){
    border-color: black;
}

MISE À JOUR

input, select, textarea {
    border-color: @green;
    &:empty {
        border-color: @red;
    }
}

De plus pour avoir un bon aspect dans la validation

 input, select, textarea {
    &[aria-invalid="true"] {
        border-color: amber !important;
    }

    &[aria-invalid="false"], &.valid {
        border-color: green !important;
    }
}