Avoir des labels flottants

Avoir les labels de votre formulaire flotté au focus d'un champ

Language: CSS

Catégorie : Formulaire

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

Sommaire

Le script

Utiliser un LLM pour résumer ou expliquer ce script

Le script

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>

Les attributes

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Tuto

Template

Code source du 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>