Tous nos scripts

Formulaire

Avoir des labels flottants

<style>
 input:focus~.label-flottant,
 input:not(:focus):valid~.label-flottant,
 input[type=email]:not(:placeholder-shown)~.label-flottant {
   top: 5px;
   font-size: 12px;
 }

 .input:focus {
   outline: none;
 }
</style>

Etape 1 - Ajouter le script sur la page ou le projet Webflow

<style>
 input:focus~.label-flottant,
 input:not(:focus):valid~.label-flottant,
 input[type=email]:not(:placeholder-shown)~.label-flottant {
   top: 5px;
   font-size: 12px;
 }

 .input:focus {
   outline: none;
 }
</style>
Copier

Etape 2 - Ajouter les attributes correspondants

Nom

Valeur

Nom

Copié !

Valeur

Copié !

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Tuto, template & scripts

Tuto

Template

Script

<style>
 input:focus~.label-flottant,
 input:not(:focus):valid~.label-flottant,
 input[type=email]:not(:placeholder-shown)~.label-flottant {
   top: 5px;
   font-size: 12px;
 }

 .input:focus {
   outline: none;
 }
</style>
Copier

Etape 2 - Ajuster le code pour votre besoin

  • Modifier la class de votre label (ici .label-flottant)
  • Changer la class de votre input (ici .input)
  • Mettre votre label en position absolute
  • Modifier les valeurs dans le code en fonction de l'affichage souhaité
Copié dans le presse-papiers
Logo Justa

Progressez sur Webflow

Oops! Une erreur s'est produite lors de la soumission du formulaire.