Les étiquettes flottantes sont une interface utilisateur de formulaire de saisie moderne et peu encombrante, couramment utilisée dans Material Design et d’autres applications.
Gain de place : Peut également servir d’étiquette et d’espace réservé, économisant ainsi de l’espace vertical même lorsque l’espace sur l’écran est limité.
Clarification du contenu d’entrée : Les utilisateurs voient toujours ce que signifie un champ (étiquette), à la fois pendant et après la saisie, afin que les utilisateurs ne soient jamais confus.
Interactions sophistiquées : Une animation en douceur de l’étiquette mise au point fournit un retour visuel efficace à l’utilisateur indiquant que l’entrée est désormais disponible.
Placeholder hack : Utilise la pseudo-classe :placeholder-shown pour déterminer le statut (saisie ou non) en utilisant uniquement CSS, sans utiliser de JavaScript. (* placeholder=" " du côté HTML est une exigence obligatoire)
Assurer la visibilité : Lorsque l’étiquette est relevée, la visibilité est maintenue en réduisant la taille de la police (scale(0.75)) et en appliquant une police en gras (font-weight : 500) et une couleur de thème.
Accessibilité : En liant l’attribut for de l’élément label et l’id de l’élément input, il prend en charge les lecteurs d’écran et le mouvement de focus lorsque vous cliquez sur l’étiquette. De plus, « pointer-events : none » est spécifié afin que l’étiquette n’interfère pas avec l’opération.
Vous pouvez ajuster les points suivants en fonction du système de conception de votre projet.
Coloration : Changez la couleur de .fli-input:focus et .fli-input:focus ~ .fli-label (actuellement #6366f1) par la couleur de la marque.
Coins arrondis et ombres : En modifiant border-radius et box-shadow de .fli-input, vous pouvez vous ajuster à un design plus plat ou à un design plus arrondi et plus pop.
Taille de police : Si vous ajustez la taille de la police ou le taux de réduction (« scale(0,75) ») de l’étiquette, veuillez également affiner le « remplissage » (en particulier la valeur supérieure) de « .fli-input » afin que l’étiquette et le texte saisi ne se chevauchent pas.
##Code d’implémentation
<div class="fli-group">
<input type="text" id="username" class="fli-input" placeholder=" " required />
<label for="username" class="fli-label">nom d'utilisateur</label>
</div>
<style>
.fli-group {
position: relative;
width: 100%;
max-width: 320px;
}
.fli-input {
width: 100%;
padding: 1.5rem 1.25rem 0.5rem;
font-size: 1rem;
font-family: inherit;
color: #0f172a;
background-color: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 0.75rem;
outline: none;
box-sizing: border-box;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.fli-input:hover {
border-color: #cbd5e1;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}
.fli-input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
background-color: #ffffff;
}
.fli-label {
position: absolute;
top: 1.1rem;
left: 1.25rem;
font-size: 1rem;
color: #64748b;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: left top;
}
/* Entrée ou statut terminé */
.fli-input:focus ~ .fli-label,
.fli-input:not(:placeholder-shown) ~ .fli-label {
transform: translateY(-0.6rem) scale(0.75);
color: #6366f1;
font-weight: 500;
}
/* Floue mais toujours saisie */
.fli-input:not(:focus):not(:placeholder-shown) ~ .fli-label {
color: #475569;
}
</style>Chrome : dernière version
Safari : dernière version
Firefox : dernière version
-Edge : Dernière version
La pseudo-classe :placeholder-shown est prise en charge par tous les navigateurs modernes et peut être utilisée en toute sécurité.