Salut tout le monde,

Aujourd’hui j’avais envie d’essayer un truc rapide en CSS :

Reproduire le design de google Material sur les inputs et textareas avec l’animation et tout, sans JS.

Voici le résultat:

Au final ça n’a pas été si difficile. La seule partie un peu “hard” a été de trouver comment garder le label et la couleur du bas de l’input comme il faut quand le champ est rempli.

C’est finalement grâce au sélecteur :placeholder-shown (support navigateur 89%) que j’ai pu le faire, en mettant des placeholders ne contenant qu’un espace.


Si ce genre de petites astuces vous plaisent n’hésitez pas à me le dire, j’essaierai d’en partager un peu plus souvent ;)

Merci de m’avoir lu et à bientôt !