Add a border color to an input when it is filled in Webflow
Tools:
Introduction
Webflow does not allow you to modify the “not empty/filled in” state of an input natively.
You can only change the states:
Hover
Pressed
Focused
Assigning a specific color to an input can have several advantages in terms of interface design and user experience:
Visibility : A specific color can help distinguish an input field from other elements, making the form more intuitive and easy to navigate.
Feedback : Color can be used for immediate feedback. For example, a color change can indicate whether the information entered is valid or not (green for correct, red for an error).
Aesthetics : A well-chosen color palette can contribute to the visual harmony of the interface and to a pleasant user experience.
It is important to ensure that color choices are accessible and do not create problems for users with reduced or different color vision. As always, the Webflow agency Gemeos has a solution for you!
Tutorial
1. Add this piece of Javascript
You can add this custom code in an embed, before the tag <body>on your page, or even at the level of your project (in the settings) if you want to apply the rendering for all the inputs on your site.
<script>
// Ajoutez cet événement sur chaque input de votre formulaire
document.querySelectorAll('input').forEach(input => {
input.addEventListener('input', function() {
// Vérifie si l'input contient du texte
if (this.value.length > 0) {
// Change la couleur de la bordure si l'input n'est pas vide
this.style.borderColor = '#93CDEA'; // Vous pouvez choisir la couleur que vous voulez
} else {
// Réinitialise la couleur de la bordure si l'input est vide
this.style.borderColor = ''; // Remet la couleur de bordure par défaut
}
});
});
</script>
2. Customize the color of the border of your input
Change the color”#93CDEA“present in the code below by the hexadecimal code of the desired color.
Growth Marketer, Webflow expert and a jack of all trades. I take care of commercial operations, ensure the smooth running of projects and take care of issues related to marketing (SEO, Tracking, Copywriting, etc.)
.avif)
