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 réalise que ce fil de discussion est très ancien, mais les choses ont un peu changé depuis et cela m'a aidé à trouver la bonne combinaison de choses dont j'avais besoin pour résoudre mon problème. Alors j'ai pensé partager ce que j'ai fait.

Le problème était que je devais appliquer le même css pour une entrée facultative si elle était remplie, comme pour une entrée requise remplie. Le css utilisait la classe pseudo :valid qui appliquait le css également à l'entrée facultative même lorsqu'elle n'était pas remplie.

Voici comment j'ai résolu le problème :

HTML

CSS

input:required:valid {
    ....
}
input:optional::not(:placeholder-shown){
    ....
}

Answer 2

Si le support des anciens navigateurs n'est pas nécessaire, vous pourriez utiliser une combinaison de required, valid et invalid.

La bonne chose à propos de l'utilisation de cela est que les pseudo-éléments valid et invalid fonctionnent bien avec les attributs de type des champs de saisie. Par exemple :

input:invalid, textarea:invalid { 
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

input:valid, textarea:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

Pour référence, JSFiddle ici : http://jsfiddle.net/0sf6m46j/

Answer 3

Cela a fonctionné pour moi :

Pour le HTML, ajoutez l'attribut required à l'élément input

Pour le CSS, utilisez le sélecteur :invalid pour cibler l'input vide

input.my-input-element:invalid {

}

Notes :

• A propos de required depuis w3Schools.com : "Lorsqu'il est présent, il spécifie qu'un champ de saisie doit être rempli avant de soumettre le formulaire."

Answer 4

$('input#edit-keys-1').blur(function(){
    tmpval = $(this).val();
    if(tmpval == '') {
        $(this).addClass('empty');
        $(this).removeClass('not-empty');
    } else {
        $(this).addClass('not-empty');
        $(this).removeClass('empty');
    }
});

dans jQuery. J'ai ajouté une classe et stylisé avec du css.

.empty { background:none; }

Answer 5

Cela a fonctionné pour moi en ajoutant une classe au champ de saisie, puis en appliquant des règles CSS à celui-ci :

input[value=""].product {
    display: none;
}