Comment changer la bordure d’un input rempli dans Webflow ?

Introduction

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 :

1. 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.
2. 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).
3. 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