How can I remove the yellow background that appears when iOS or Safari autocompletes an email address in a Webflow form?

Published on
September 22, 2023

To remove the yellow background that appears when iOS or Safari autocompletes an email address in a Webflow form, you can use custom CSS code. Follow these steps:

  1. Identify the form or input field: First, you need to identify the form or input field that is affected by the yellow background. In Webflow, each form element has a unique class name associated with it. You can find this class name by selecting the form element and going to the "Settings" tab on the right-hand panel. Look for the "Class" field and make a note of the class name.

  2. Add custom CSS code: In the Webflow Designer, go to the "Custom Code" tab in the site settings. In the "Head Code" section, you can add custom CSS that will override the default styles. Enter the following code:

/* Replace ".input-class" with the actual class name of your input field */.input-class:-webkit-autofill {    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;}

Make sure to replace ".input-class" with the actual class name of your input field that you noted in the previous step.

  1. Publish your site: Once you have added the custom CSS code, click "Publish" to apply the changes to your live site.

  2. Test it: Open your site on iOS or Safari and try filling in the email field. The yellow background should no longer appear when the email address is autocompleted.

By following these steps, you can remove the yellow background that appears when iOS or Safari autocompletes an email address in a Webflow form.

Additional Questions:

  1. How can I customize the appearance of form elements in Webflow?
  2. What are some other common CSS tweaks I can make in Webflow?
  3. How do I optimize my Webflow site for SEO?