CSS : supprimer subtilement le placeholder d'un champ input ou textarea photo

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

Normalement, la valeur du placeholder disparaît et permet à l'utilisateur de compléter sa saisie mais sous certaines versions de Chrome, cela ne passe pas bien.

J'ai considéré l'utilisation de JavaScript, évidemment, avant de me rendre compte que l'on pouvait résoudre le problème avec quelques règles CSS natives. Toutes les déclarations sont à ajouter - ne cherchez pas à les compiler, cela ne fonctionnera pas !

On joue donc avec l'opacité et un léger effet de transition pour le côté subtil et smooth :

/* Placeholders */
::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome 56, Safari 9 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */

/* Focus */
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome 56, Safari 9 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

Ps : Chrome souffre également d'un bug qui concerne la fonction autofill qui aide les utilsateurs à pré-remplir les formulaires.

A lire :  Résoudre le problème du plugin WordPress qui ne s'affiche pas dans la liste des plugins

Pensez donc à supprimer les valeurs enregistrées pendant vos tests (Chrome > Paramètres > Paramètres avancés > Confidentialité et sécurité > Effacer les données de navigation > Paramètres avancés > cocher Données de saisie automatique).

Enjoy !

Pour développer votre projet WordPress ou Woocommerce, faites appel à mon expertise pour réaliser un site rapide, performant et fonctionnel.

Je soumets mon projet

Si vous avez trouvé une faute d’orthographe, informez-nous en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée s’il vous plaît.

Articles en rapport:

CSS : supprimer subtilement le placeholder d'un champ input ou textarea

par Matt Lecture: 1 min
0

Pin It on Pinterest

Share This

Spelling error report

The following text will be sent to our editors: