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

Design help General
1

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
2

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;
3

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

4

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