Masquer le placeholder d’un champ input ou textarea avec CSS

Pour masquer le placeholder d’un champ lorsqu’il reçoit le focus, utilisez le pseudo-élément CSS ::placeholder avec le sélecteur :focus. Les préfixes destinés aux anciens navigateurs ne sont plus nécessaires. Toutefois, conservez toujours un label visible et ne placez pas d’instruction essentielle uniquement dans le placeholder.

Je viens de finir un projet sur Codeable qui utilisait WordPress et Gravity Forms et lors de la réalisation d’un formulaire de réservation complexe, je me suis heurté à Chrome qui ne supprime pas toujours (suivant les versions utilisées) le texte du placeholder d’un champ de type input ou textarea lorsque le curseur est placé à l’intérieur (action focus).

Le texte défini dans l’attribut HTML placeholder reste normalement visible tant qu’un champ est vide. Il ne disparaît pas automatiquement lorsque l’utilisateur clique dans le champ.

Ce comportement est volontaire. Le placeholder disparaît lorsque l’utilisateur commence à saisir une valeur.

Dans certaines interfaces, on peut néanmoins préférer le masquer dès que le champ reçoit le focus. Quelques lignes de CSS suffisent. Aucun JavaScript n’est nécessaire.

Masquer immédiatement le placeholder au focus

La version moderne la plus simple consiste à rendre le placeholder transparent lorsque le champ reçoit le focus :

input:focus::placeholder,
textarea:focus::placeholder {
    color: transparent;
}Langage du code : CSS (css)

Cette règle s’applique à tous les champs input et textarea de la page.

Le champ conserve son placeholder dans le HTML. Seul son affichage change pendant le focus.

Masquer le placeholder avec une transition douce

Pour obtenir une disparition progressive, animez son opacité :

input::placeholder,
textarea::placeholder {
    opacity: 1;
    transition: opacity 180ms ease;
}

input:focus::placeholder,
textarea:focus::placeholder {
    opacity: 0;
}Langage du code : CSS (css)

Une transition courte reste préférable. Le placeholder doit disparaître rapidement pour ne pas gêner la saisie.

La valeur de 180 millisecondes apporte un effet discret sans donner l’impression que le formulaire hésite avant d’obéir.

Respecter la préférence de réduction des animations

Certains utilisateurs demandent au système de réduire les animations. Le CSS peut respecter cette préférence avec prefers-reduced-motion :

input::placeholder,
textarea::placeholder {
    opacity: 1;
    transition: opacity 180ms ease;
}

input:focus::placeholder,
textarea:focus::placeholder {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    input::placeholder,
    textarea::placeholder {
        transition: none;
    }
}Langage du code : CSS (css)

Le placeholder disparaît toujours, mais sans animation lorsque l’utilisateur a activé cette préférence.

Limiter la règle à un formulaire précis

Évitez souvent d’appliquer la règle à tous les champs du site. Un formulaire de recherche, une connexion ou une commande WooCommerce peut avoir un comportement différent.

Ajoutez plutôt une classe au formulaire ou à son conteneur :

<form class="form-hide-placeholders">
    <label for="customer-name">Nom complet</label>

    <input
        id="customer-name"
        name="customer_name"
        type="text"
        placeholder="Exemple : Marie Dupont"
    >
</form>Langage du code : JavaScript (javascript)

Puis ciblez uniquement cette classe :

.form-hide-placeholders input::placeholder,
.form-hide-placeholders textarea::placeholder {
    opacity: 1;
    transition: opacity 180ms ease;
}

.form-hide-placeholders input:focus::placeholder,
.form-hide-placeholders textarea:focus::placeholder {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .form-hide-placeholders input::placeholder,
    .form-hide-placeholders textarea::placeholder {
        transition: none;
    }
}Langage du code : CSS (css)

Cette approche évite les effets de bord et rend le CSS réutilisable.

Cibler uniquement les champs possédant un placeholder

Vous pouvez rendre le sélecteur plus explicite avec l’attribut placeholder :

input[placeholder]:focus::placeholder,
textarea[placeholder]:focus::placeholder {
    opacity: 0;
}Langage du code : CSS (css)

Cette précision n’est pas obligatoire. Un champ sans placeholder ne possède simplement aucun texte à masquer.

Pourquoi les anciens préfixes CSS ne sont-ils plus utiles ?

Les anciennes solutions ajoutaient plusieurs variantes :

::-webkit-input-placeholder
:-moz-placeholder
::-moz-placeholder
:-ms-input-placeholder
::placeholderLangage du code : CSS (css)

Elles ciblaient notamment :

• les anciennes versions de Firefox ;
• Internet Explorer 10 et 11 ;
• les premières implémentations de Chrome et Safari ;
• les navigateurs utilisant encore une syntaxe expérimentale.

Le pseudo-élément standard ::placeholder est désormais largement pris en charge. Pour un site moderne, les préfixes historiques ajoutent surtout du bruit et compliquent la maintenance.

Ils ne se justifient plus que si un projet possède une obligation contractuelle de prendre en charge un navigateur très ancien.

Le placeholder doit-il disparaître au focus ?

Pas forcément. Le comportement natif conserve le placeholder jusqu’à la première saisie. Cette solution permet à l’utilisateur de relire l’exemple pendant qu’il commence son interaction avec le champ.

Masquer le placeholder au focus peut être pertinent lorsque :

• le texte risque de gêner visuellement le curseur ;
• le formulaire utilise déjà des labels clairs ;
• le placeholder contient seulement un exemple facultatif ;
• le design prévoit explicitement cette interaction.

En revanche, ne le masquez pas immédiatement lorsque le texte contient une consigne indispensable. L’utilisateur peut cliquer dans le champ, oublier l’instruction, puis devoir quitter le champ pour la revoir. Ce serait une interface techniquement élégante et humainement contrariée.

Ne jamais remplacer un label par un placeholder

Un placeholder ne doit jamais servir d’unique intitulé de champ.

Ce code est insuffisant :

<input
    type="email"
    name="email"
    placeholder="Votre adresse e-mail"
>Langage du code : HTML, XML (xml)

Le champ possède bien un texte visible lorsqu’il est vide, mais ce texte disparaît pendant la saisie. Il peut aussi être mal annoncé par certaines technologies d’assistance.

Ajoutez un vrai label associé au champ :

<label for="email">Adresse e-mail</label>

<input
    id="email"
    type="email"
    name="email"
    autocomplete="email"
    placeholder="marie@example.com"
>Langage du code : HTML, XML (xml)

Le label décrit la fonction du champ. Le placeholder fournit seulement un exemple de format.

Conserver les instructions importantes avec aria-describedby

Une règle de mot de passe, un format attendu ou une restriction ne doit pas disparaître pendant la saisie.

Placez cette information sous le champ et reliez-la avec aria-describedby :

<label for="account-password">Mot de passe</label>

<input
    id="account-password"
    name="account_password"
    type="password"
    autocomplete="new-password"
    aria-describedby="password-help"
    placeholder="Votre mot de passe"
>

<p id="password-help" class="field-help">
    Utilisez au moins 12 caractères.
</p>Langage du code : HTML, XML (xml)

Le texte reste visible après la saisie. Les lecteurs d’écran peuvent aussi l’annoncer en complément du label.

Styliser correctement la couleur du placeholder

Les navigateurs appliquent parfois une couleur ou une opacité différente aux placeholders. Pour obtenir un rendu cohérent, définissez explicitement leur couleur :

input::placeholder,
textarea::placeholder {
    color: #64748b;
    opacity: 1;
}Langage du code : CSS (css)

L’opacité à 1 évite que le navigateur ajoute sa propre transparence à la couleur choisie.

Vérifiez néanmoins le contraste entre le texte et le fond du champ. Le placeholder doit paraître distinct de la valeur saisie sans devenir illisible.

Différence entre ::placeholder et :placeholder-shown

Ces deux sélecteurs ne ciblent pas la même chose.

Le pseudo-élément ::placeholder

::placeholder cible uniquement le texte du placeholder :

input::placeholder {
    color: #64748b;
}Langage du code : CSS (css)

La pseudo-classe :placeholder-shown

:placeholder-shown cible le champ lorsque son placeholder est actuellement affiché :

input:placeholder-shown {
    border-color: #94a3b8;
}Langage du code : CSS (css)

Lorsque l’utilisateur saisit une valeur, le champ ne correspond plus à :placeholder-shown.

Cette pseudo-classe peut donc servir à différencier visuellement un champ encore vide :

input {
    border: 1px solid #0f172a;
}

input:placeholder-shown {
    border-color: #94a3b8;
}Langage du code : CSS (css)

Attention toutefois : l’absence de placeholder empêche cette pseudo-classe de fonctionner. Elle ne constitue donc pas un remplacement universel pour tester si un champ est vide.

Exemple complet de formulaire accessible

Voici un exemple complet avec label, exemple, texte d’aide et disparition douce du placeholder :

<form class="booking-form">
    <div class="form-field">
        <label for="booking-email">Adresse e-mail</label>

        <input
            id="booking-email"
            name="booking_email"
            type="email"
            autocomplete="email"
            placeholder="marie@example.com"
            aria-describedby="booking-email-help"
            required
        >

        <p id="booking-email-help" class="field-help">
            Nous utiliserons cette adresse pour confirmer la réservation.
        </p>
    </div>

    <div class="form-field">
        <label for="booking-message">Votre demande</label>

        <textarea
            id="booking-message"
            name="booking_message"
            rows="6"
            placeholder="Précisez les dates et le nombre de personnes"
        ></textarea>
    </div>

    <button type="submit">Envoyer la demande</button>
</form>Langage du code : JavaScript (javascript)

Le CSS associé :

.booking-form input::placeholder,
.booking-form textarea::placeholder {
    color: #64748b;
    opacity: 1;
    transition: opacity 180ms ease;
}

.booking-form input:focus::placeholder,
.booking-form textarea:focus::placeholder {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .booking-form input::placeholder,
    .booking-form textarea::placeholder {
        transition: none;
    }
}Langage du code : CSS (css)

Appliquer la règle à Gravity Forms

Gravity Forms ajoute la classe gform_wrapper autour de ses formulaires. Vous pouvez donc limiter la règle aux champs générés par l’extension :

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
    opacity: 1;
    transition: opacity 180ms ease;
}

.gform_wrapper input:focus::placeholder,
.gform_wrapper textarea:focus::placeholder {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .gform_wrapper input::placeholder,
    .gform_wrapper textarea::placeholder {
        transition: none;
    }
}Langage du code : CSS (css)

Pour cibler un seul formulaire, utilisez son identifiant de wrapper. Gravity Forms génère généralement une structure proche de :

#gform_wrapper_5 input::placeholder,
#gform_wrapper_5 textarea::placeholder {
    opacity: 1;
    transition: opacity 180ms ease;
}

#gform_wrapper_5 input:focus::placeholder,
#gform_wrapper_5 textarea:focus::placeholder {
    opacity: 0;
}Langage du code : CSS (css)

Remplacez 5 par l’identifiant réel du formulaire.

Appliquer la règle à Fluent Forms

Fluent Forms utilise notamment la classe fluentform. La règle peut être limitée à ses formulaires :

.fluentform input::placeholder,
.fluentform textarea::placeholder {
    opacity: 1;
    transition: opacity 180ms ease;
}

.fluentform input:focus::placeholder,
.fluentform textarea:focus::placeholder {
    opacity: 0;
}Langage du code : CSS (css)

Inspectez toujours le HTML final. Les classes peuvent varier selon les versions, les thèmes et les intégrations.

Appliquer la règle à Contact Form 7

Contact Form 7 place généralement ses champs dans un conteneur portant la classe wpcf7 :

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    opacity: 1;
    transition: opacity 180ms ease;
}

.wpcf7 input:focus::placeholder,
.wpcf7 textarea:focus::placeholder {
    opacity: 0;
}Langage du code : CSS (css)

Où ajouter ce CSS dans WordPress ?

Plusieurs emplacements conviennent :

• le fichier CSS d’un thème enfant ;
• le champ CSS additionnel du thème ;
• un plugin de snippets CSS ;
• la feuille de style d’une extension personnalisée ;
• un fichier CSS chargé uniquement sur les pages contenant le formulaire.

N’ajoutez pas la règle directement dans les fichiers d’un thème ou d’une extension tiers. Une mise à jour écraserait la modification.

Sur un site performant, chargez idéalement ce CSS seulement là où le formulaire apparaît. Quelques lignes ne vont pas faire fondre le serveur, mais une bonne discipline commence souvent par de petits fichiers.

Pourquoi le placeholder ne disparaît-il pas ?

Si la règle semble ne pas fonctionner, vérifiez les points suivants.

La règle est surchargée

Le thème ou l’extension peut utiliser un sélecteur plus spécifique :

.form-wrapper .field input:focus::placeholder {
    opacity: 1;
}Langage du code : CSS (css)

Augmentez raisonnablement la spécificité de votre propre règle. Évitez de commencer directement avec !important.

Le champ ne possède pas de placeholder

Inspectez le HTML et vérifiez la présence de l’attribut :

placeholder="Votre texte"Langage du code : JavaScript (javascript)

Le texte visible est une valeur

Un champ peut utiliser l’attribut value au lieu de placeholder :

<input type="text" value="Votre nom">Langage du code : HTML, XML (xml)

Dans ce cas, ::placeholder ne peut rien masquer. Le texte constitue une vraie valeur du champ.

L’autocomplétion remplit déjà le champ

Le navigateur peut remplir automatiquement le nom, l’adresse ou l’e-mail. Le placeholder n’est alors plus affiché, puisque le champ contient une valeur.

Ne désactivez pas systématiquement l’autocomplétion pour faciliter les tests. Elle aide les utilisateurs à remplir les formulaires plus rapidement.

Faut-il utiliser JavaScript ?

Non pour masquer visuellement un placeholder au focus.

Ce besoin relève entièrement du CSS :

input:focus::placeholder,
textarea:focus::placeholder {
    opacity: 0;
}Langage du code : CSS (css)

JavaScript ne devient utile que si vous devez modifier dynamiquement le contenu de l’attribut, selon une sélection ou une logique applicative.

Pour simplement cacher du texte pendant le focus, ajouter un gestionnaire d’évènement serait une manière assez ambitieuse de déplacer un rideau.

La version recommandée

Pour la plupart des projets, utilisez cette version ciblée et respectueuse des préférences d’animation :

.form-hide-placeholders input::placeholder,
.form-hide-placeholders textarea::placeholder {
    color: #64748b;
    opacity: 1;
    transition: opacity 180ms ease;
}

.form-hide-placeholders input:focus::placeholder,
.form-hide-placeholders textarea:focus::placeholder {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .form-hide-placeholders input::placeholder,
    .form-hide-placeholders textarea::placeholder {
        transition: none;
    }
}Langage du code : CSS (css)

Ajoutez ensuite la classe form-hide-placeholders uniquement aux formulaires concernés.

Checklist rapide

• utiliser uniquement le pseudo-élément standard ::placeholder ;
• combiner :focus et ::placeholder ;
• limiter la règle à un formulaire ou un composant précis ;
• conserver un label visible pour chaque champ ;
• ne pas placer une instruction essentielle uniquement dans le placeholder ;
• vérifier le contraste du texte ;
• respecter prefers-reduced-motion ;
• éviter JavaScript pour un simple effet visuel ;
• tester l’autocomplétion du navigateur ;
• contrôler le rendu au clavier et sur mobile.

Questions fréquentes

Comment masquer un placeholder au focus en CSS ?

Utilisez input:focus::placeholder et textarea:focus::placeholder, puis définissez opacity: 0 ou color: transparent.

Faut-il encore utiliser les préfixes -webkit, -moz et -ms ?

Non pour les navigateurs modernes. Le pseudo-élément standard ::placeholder bénéficie désormais d’une prise en charge généralisée.

Pourquoi le placeholder reste-t-il visible au focus ?

Il s’agit du comportement normal. Le placeholder reste visible tant que le champ est vide. Il disparaît lorsque l’utilisateur saisit une valeur, sauf si un CSS personnalisé le masque plus tôt.

Un placeholder peut-il remplacer un label ?

Non. Chaque champ doit disposer d’un label visible et correctement associé. Le placeholder doit seulement fournir un exemple ou une indication courte.

Quelle différence existe entre ::placeholder et :placeholder-shown ?

::placeholder cible le texte du placeholder. :placeholder-shown cible le champ entier lorsque ce texte est actuellement affiché.

JavaScript est-il nécessaire pour masquer un placeholder ?

Non. CSS suffit pour modifier son apparence au focus. JavaScript n’est utile que si le contenu du placeholder doit changer dynamiquement.

Sources

• MDN : pseudo-élément CSS ::placeholder
• MDN : pseudo-classe :placeholder-shown
• MDN : attribut HTML placeholder
• MDN : labels et accessibilité des formulaires
• WHATWG : spécification HTML de l’attribut placeholder

Report a typo