Form text field gets bg white after autocomplete.. I have tried all the states(hover, focused etc..). Does anyone know how to change that?

Form text field gets bg white after autocomplete… I have tried all the states(hover, focused etc…). Does anyone know how to change that?

read-only-link : https://preview.webflow.com/preview/formosus-designs?utm_medium=preview_link&utm_source=designer&utm_content=formosus-designs&preview=44a8f4f238179b3f89bf57592ff4f099&pageId=6612c54b4bf3b091b5db4f5a&workflow=preview

screen recording link : 26.04.2024_21.38.21_REC

1 Like

Hello @James_Tolias

When a form field in a web browser gets a white background after an autocomplete action, it’s often because the browser itself applies some default styles to indicate that the field has been auto-filled. This can override the CSS styles you have set for your form fields.

To change the background color of autocompleted input fields, you can use the :-webkit-autofill pseudo-element, which is specific to WebKit browsers like Chrome and Safari. Here’s how you can style it:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: black !important;
}

Use your own color here instead of white

-webkit-box-shadow: 0 0 0 30px white inset !important;

It kind of worked but now it does a weird flairy thing, check it out
live site: https://formosus-designs.webflow.io/
read-only: Webflow - Formosus Designs

Never mind, I used this code and solved it:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-background-clip: text;
-webkit-text-fill-color: #fdfdfd;
transition: background-color 5000s ease-in-out 0s;
box-shadow: inset 0 0 20px 20px #0C0C0C;

Thank you very much for the help :smile:

1 Like

Hi, new to Webflow here, and definitely not an engineer, coming from design field. Where do you exactly input this code on Webflow?

Looks like it needs some small touchups; like the missing } but one way to do it is to wrap it in a <style> element and place it in an HTML embed on the page with the form.

If you have multiple forms, it’s likely easier to place that embed inside of a sitewide component like your nav or footer.