:placeholder-shown
Correspond à un champ input ou textarea qui affiche actuellement un texte de substitution, c’est-à-dire qu’il est vide et possède l’attribut placeholder.
Exemple
#.float {
position: relative;
}
.float label {
position: absolute;
left: 12px;
top: 50%;
translate: 0 -50%;
color: #a1a1aa;
pointer-events: none;
transition: all 0.15s;
}
.float input:focus + label,
.float input:not(:placeholder-shown) + label {
top: 0;
padding: 0 4px;
background: #0c0c10;
color: #c4b5fd;
font-size: 12px;
}<div class="float" style="margin-top: 8px;">
<input id="nick" placeholder=" " style="width: 100%; padding: 14px 12px 10px; border: 1px solid #52525b; border-radius: 10px; background: #0c0c10; color: inherit; font: inherit;">
<label for="nick">Nom du joueur</label>
</div>Le champ a placeholder=" ", c’est-à-dire une espace, car sans attribut la pseudo-classe ne fonctionnerait pas. Cliquez dans le champ et saisissez quelque chose : l’étiquette se déplace sur la bordure et y reste tant que le champ n’est pas vide.
Définition et utilisation
#La pseudo-classe :placeholder-shown correspond à un champ de texte tant que l’indication de l’attribut placeholder y est visible. Dès que l’utilisateur saisit le premier caractère, l’indication disparaît et le champ cesse de correspondre. Un champ sans attribut placeholder n’y correspond jamais.
C’est un moyen indirect de vérifier si un champ est vide, car le CSS n’a pas de sélecteur « champ avec une valeur ». D’où l’association courante :not(:placeholder-shown), c’est-à-dire « l’utilisateur a saisi quelque chose ». Les étiquettes flottantes et l’affichage des erreurs de validation seulement après la saisie s’appuient sur elle.
Ne la confondez pas avec le pseudo-élément ::placeholder. La pseudo-classe permet de styliser tout le champ à l’état vide (bordure, fond, étiquette à côté), tandis que le pseudo-élément ne stylise que le texte de l’indication lui-même.
Syntaxe
#sélecteur:placeholder-shown { propriété: valeur; }Utilisations courantes
#- Un champ vide avec une indication visible a une bordure en pointillés. Saisissez quelque chose, et la bordure devient continue.
- Un champ dans lequel quelque chose a été saisi. Le second champ correspond immédiatement, car il a une valeur.
Utilisations courantes en pratique
#input:placeholder-shown
input:placeholder-shown {
border-style: dashed;
border-color: #71717a;
}input:not(:placeholder-shown)
input:not(:placeholder-shown) { border-color: #10b981; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Si vous ne voulez pas d’indication visible mais avez besoin de cette pseudo-classe, définissez
placeholder=" ". Le champ paraîtra vide, et le sélecteur fonctionnera. - Le placeholder ne remplace pas une étiquette : il disparaît à la saisie et a souvent un faible contraste. Une étiquette flottante est un bon compromis, car elle reste toujours visible.
Entrées associées
#- :invalidCorrespond aux champs de formulaire dont la valeur enfreint les règles de validation HTML, par exemple un champ requis vide ou une adresse e-mail incorrecte.
- :focusCorrespond à l’élément qui a le focus, c’est-à-dire qui reçoit actuellement la saisie au clavier, par exemple un champ de formulaire cliqué.
- :not()Sélectionne les éléments qui ne correspondent à aucun des sélecteurs fournis, ni à aucun de la liste.
- A + BLe signe + sélectionne l’élément B qui se trouve immédiatement après l’élément A et partage le même parent que lui.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.