Faire correspondre une zone de saisie vide en utilisant 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=""]

Si seulement le champ est que requiredtu pourrais aller avecinput: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 annuler en utilisant #foo-thing:invalid(crédit à @SamGoody)

Dans les navigateurs modernes, vous pouvez utiliser :placeholder-shownpour 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/

Il n'y a pas de sélecteur dans CSS qui fait cela. Les sélecteurs d'attributs correspondent aux valeurs d'attribut et non aux valeurs calculées.

Vous devrez utiliser JavaScript.

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 réellement vide.

Utilisez plutôt la invalidpseudo-classe 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">

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

Si l' appui des navigateurs existants ne sont pas nécessaires, vous pouvez utiliser une combinaison de required, validet invalid.

La bonne chose sur l' utilisation de c'est validet invalidpseudo-éléments fonctionnent bien avec les attributs de type de 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/

$('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 css.

.empty { background:none; }

Cela a fonctionné pour moi:

Pour le HTML, ajoutez l' requiredattribut à l'élément d'entrée

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

Pour le CSS, utilisez le :invalidsélecteur pour cibler l'entrée vide

input.my-input-element:invalid {

}

Remarques:

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

Cette question a peut-être été posée il y a quelque temps, mais comme j'ai récemment abordé ce sujet à la recherche d'une validation de formulaire côté client et que le :placeholder-shown support s'améliore, j'ai pensé que ce qui suit pourrait aider les autres.

Utilisation de Berend idée de d'utiliser cette pseudo-classe CSS4, j'ai pu créer une validation de formulaire déclenchée uniquement après que l'utilisateur ait fini de le remplir.

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

Cela a fonctionné pour moi d'ajouter un nom de classe à l'entrée, puis d'appliquer des règles CSS à cela:

<input type="text" name="product" class="product" />

<style>
input[value=""].product {
    display: none;
}
</style>

Si vous êtes satisfait de ne pas prendre en charge IE ou pré-Chromium Edge (ce qui peut convenir si vous l'utilisez pour une amélioration progressive), vous pouvez utiliser :placeholder-showncomme l'a dit Berend. Notez que pour Chrome et Safari, vous avez en fait besoin d'un espace réservé non vide pour que cela fonctionne, bien qu'un espace fonctionne.

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

label.floating-label {
  display: block;
  position: relative;
  height: 2.2em;
  margin-bottom: 1em;
}

label.floating-label input {
  font-size: 1em;
  height: 2.2em;
  padding-top: 0.7em;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

label.floating-label input:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

label.floating-label input+span {
  position: absolute;
  top: 0em;
  left: 0;
  display: block;
  width: 100%;
  font-size: 0.66em;
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: font-size 0.1s ease-in-out, top 0.1s ease-in-out;
}

label.floating-label input:placeholder-shown {
  padding-top: 0;
  font-size: 1em;
}

label.floating-label input:placeholder-shown+span {
  top: 0.3em;
  font-size: 1em;
}

<fieldset>
  <legend>
    Floating labels example (no-JS)
  </legend>
  <label class="floating-label">
    <input type="text" placeholder=" ">
    <span>Username</span>
  </label>
  <label class="floating-label">
    <input type="Password" placeholder=" ">
    <span>Password</span>
  </label>
</fieldset>
<p>
  Inspired by Bootstrap's <a href="https://getbootstrap.com/docs/4.0/examples/floating-labels/">floating labels</a>.
</p>

Je suis surpris par les réponses que nous avons un attribut clair pour obtenir des zones de saisie vides, jetez un œil à ce code

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

METTRE À JOUR

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

De plus pour avoir un bon aperçu de la validation

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

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

Je me rends compte que c'est un fil 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 avoir le même CSS appliqué pour une entrée facultative si elle était remplie, comme je l'avais fait pour un obligatoire rempli. Le css utilisait la classe psuedo: valid qui appliquait le css sur l'entrée facultative également lorsqu'elle n'était pas remplie.

C'est ainsi que je l'ai réparé;

HTML

<input type="text" required="required">
<input type="text" placeholder="">

CSS

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