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

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

En utilisant l'idée de Berend 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 une démo et explication sur CodePen : https://codepen.io/johanmouchet/pen/PKNxKQ

Answer 2

Si vous êtes satisfait de ne pas soutenir IE ou pre-Chromium Edge (ce qui peut être acceptable si vous utilisez ceci pour l'amélioration progressive), vous pouvez utiliser :placeholder-shown comme l'a dit Berend. Notez que pour Chrome et Safari, vous avez en réalité 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;
}

    Exemple d'étiquettes flottantes (sans JS)

    Nom d'utilisateur

    Mot de passe

  Inspiré par les étiquettes flottantes de Bootstrap.

Answer 3

Alors j'ai joué plus tôt avec les nouvelles clauses :where et :is et imaginé ce petit truc amusant, et après avoir trouvé ce post avec les bouts :invalid et :placeholder-shown, j'ai pensé que je pourrais partager cette possibilité pour référence future

:required:where( input, textarea ):where( :placeholder-shown, :invalid ) {
    border-color: var(--warning);
}

qui applique la couleur :root { --warning: orange; } à tout input ou textarea requis, qui est soit vide soit invalide. Et c'est tout simplement sexy

Answer 4

Alors qu'aucun navigateur ne prend actuellement en charge cela (2021-10-01), il existe une proposition pour une pseudo-classe :blank.

réf: https://developer.mozilla.org/en-US/docs/Web/CSS/:blank. Notez que ceci est expérimental et qu'aucun navigateur ne le prend en charge actuellement.

Answer 5

Voici comment vous pouvez le rendre possible. N'oubliez pas de définir placeholder=" " et required comme attributs de vos inputs. Vous pouvez modifier les props comme vous le souhaitez.

body{
    display: flex;
    justify-content: center;
    align-items: center;
}
.input-gp {
    margin-top: 150px;
    position: relative;

}
.input-gp input {
    position: relative;

}
.input-gp label{
    position: absolute;
    left: 5px;
    bottom: 5px;
    transition: all .4s ease;
}
.input-gp input:placeholder-shown + label{
    left: 10px;
    bottom: 5px;
}
.input-gp input:focus + label,
.input-gp input + label{
    bottom: 30px;
    left: 10px;
}

    Email