web-dev-qa-db-fra.com

Faire correspondre une zone de saisie vide à l'aide de CSS

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

input[value=""]
cssinputcss-selectors
119
Sjoerd

Si seul le champ est required, vous pouvez utiliser input:valid

#foo-thing:valid + .msg { visibility: visible!important; }      
 <input type="text" id="foo-thing" required="required">
 <span class="msg" style="visibility: hidden;">Yay not empty</span>

Voir en direct sur jsFiddle

OU nie en utilisant #foo-thing:invalid (crédit de @SamGoody)

144
lukmdo

Dans les navigateurs modernes, vous pouvez utiliser :placeholder-shown pour cibler l’entrée vide (à ne pas confondre avec ::placeholder).

input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

Plus d'informations et support du navigateur: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

120
Berend

Il n'y a pas de sélecteur dans CSS qui le fasse. Les sélecteurs d'attributs correspondent aux valeurs d'attribut, pas aux valeurs calculées.

Vous devrez utiliser JavaScript.

43
Quentin

La mise à jour de la valeur d'un champ ne met pas à jour son attribut value dans le DOM. C'est pourquoi votre sélecteur correspond toujours à un champ, même s'il n'est pas vide.

Utilisez plutôt la invalid pseudo-class pour obtenir ce que vous voulez, comme ceci:

input:required {
  border: 1px solid green;
}
input:required:invalid {
  border: 1px solid red;
}
<input required type="text" value="">

<input required type="text" value="Value">
17
Shaggy

input[value=""], input:not([value])

marche avec:

<input type="text" />
<input type="text" value="" />

Mais le style ne changera pas dès que quelqu'un commencera à taper (vous avez besoin de JS pour cela).

15
Draco Ater

Si la prise en charge des anciens navigateurs n'est pas nécessaire, vous pouvez utiliser une combinaison de required, valid et invalid.

L'avantage à utiliser ceci est que les pseudo-éléments valid et invalid fonctionnent bien avec les attributs de type des champs d'entrée. 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;
}
<input type="email" name="email" placeholder="[email protected]" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>

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

10
My Stack Overfloweth
$('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 stylé avec css.

.empty { background:none; }
5
Israel Morales

Cela a fonctionné pour moi:

html: - ajoute l'attribut requis à l'élément d'entrée

<input class="my-input-element" type="text" placeholder="" required />

css: - utilisation: sélecteur non valide

input.my-input-element:invalid {

}

Notes:

  • la valeur dans l'élément input n'est pas nécessaire.
  • About required from w3Schools.com , "Le cas échéant, il indique qu'un champ de saisie doit être rempli avant de soumettre le formulaire."
3
Ariella

Cette question a peut-être été posée il y a un certain temps, mais comme je venais d'atterrir sur ce sujet, je cherchais une validation de formulaire côté client et le :placeholder-shownsupport va mieux, j'ai pensé que ce qui suit pourrait aider les autres.

En utilisant Berend l'idée d'utiliser cette pseudo-classe CSS4, j'ai été en mesure de créer une validation de formulaire déclenchée uniquement une fois que l'utilisateur a fini de le remplir.

Voici ademo et explication sur CodePen: https://codepen.io/johanmouchet/pen/PKNxKQ

2
Johan M.

Je me suis demandé par réponses nous avons l'attribut clair pour obtenir des zones de saisie vides, jetez un oeil à ce code

/*empty input*/
input:empty{
    border-color: red;
}
/*input with value*/
input:not(:empty){
    border-color: black;
}

MISE À JOUR 

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

More over pour avoir un super look dans la validation

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

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