Form text field gets bg white after autocomplete… I have tried all the states(hover, focused etc…). Does anyone know how to change that?
screen recording link : 26.04.2024_21.38.21_REC
Form text field gets bg white after autocomplete… I have tried all the states(hover, focused etc…). Does anyone know how to change that?
screen recording link : 26.04.2024_21.38.21_REC
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
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.