Add a border color to an input when it’s filled in Webflow

Introduction

Webflow doesn't let you change the "non-empty/filled in" state of an input natively.

You can only edit these states:

• Hover
• Pressed
• Focused

Giving an input a specific color can bring a few design and UX benefits:

1. Visibility: A specific color can help distinguish a field from the rest of the interface, making the form more intuitive and easier to navigate.
2. Feedback: Color can act as instant feedback. For example, a color change can show whether the entered information is valid or not (green for correct, red for an error).
3. Aesthetics: A well-chosen color palette can improve the visual harmony of the interface and create a more pleasant user experience.

It’s important to make sure your color choices are accessible and don’t create problems for users with reduced or different color vision. As always, Gemeos Webflow agency has a solution for you!

Tutorial

1. Add this piece of JavaScript

You can add this custom code in an embed, before the <body> tag at the page level, or even at the project level (in Settings) if you want the styling to apply to every input on your site.

‍

2. Customize your input border color

Change the "#93CDEA" color in the code below to the hex code of the color you want.

‍

3. Publish your page and test the result