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:
- Visibility: A specific color can help distinguish a field from the rest of the interface, making the form more intuitive and easier to navigate.
- 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).
- 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
Good to know
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.
.avif)
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.
