Ajouter un border color à un input lorsqu'il est renseigné dans Webflow
Introduction
| État input | Disponible nativement Webflow | Solution |
|---|---|---|
| Hover | Oui | Panneau Styles |
| Focused | Oui | Panneau Styles |
| Non vide (renseigné) | Non | Script JS (ce tutoriel) |
Webflow ne permet pas de modifier l'état 'non vide/renseigné" d'un input nativement.
Vous pouvez uniquement modifier les états :
- Hover
- Pressed
- Focused
L'attribution d'une couleur spécifique à un input peut avoir plusieurs avantages en termes de design d'interface et d'expérience utilisateur :
- Visibilité : Une couleur spécifique peut aider à distinguer un champ de saisie des autres éléments, rendant ainsi le formulaire plus intuitif et facile à naviguer.
- Feedback : La couleur peut servir de feedback immédiat. Par exemple, un changement de couleur peut indiquer si l'information saisie est valide ou non (vert pour correct, rouge pour une erreur).
- Esthétique : Une palette de couleurs bien choisie peut contribuer à l'harmonie visuelle de l'interface et à une expérience utilisateur agréable.
Il est important de veiller à ce que les choix de couleurs soient accessibles et ne créent pas de problèmes pour les utilisateurs avec une vision des couleurs réduite ou différente. Comme toujours, l'agence Webflow Gemeos a une solution pour vous !
Tutoriel
1. Ajoutez ce morceau de Javascript
Vous pouvez ajouter ce custom code dans un embed, avant la balise <body> au niveau de votre page, ou même au niveau de votre projet (dans les paramètres) si vous souhaitez appliquer le rendu pour tous les inputs de votre site.
2. Personnalisez la couleur du border de votre input
Modifiez la couleur "#93CDEA" présente dans le code ci-dessous par le code hexadécimal de la couleur souhaitée.
3.Publiez votre page et testez le résultat
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
