Color of standard yellow box in the e-mail form

Design help General
1

Hi! Thanks to @Tahi I have successfully changed a placeholder color, but also I need to get rid of this yellow box, which appears after I enter an e-mail to the field: Screenshot by Lightshot
How I can make it transparent (I don’t work with the code at all ), I can only copy and paste some lines of the code )))))
Many thanks in advance!

Here is my public share link: LINK
(how to access public share link)

2

I’m thinking this is probably only an issue in Chrome? If so try this in your custom header code for the site.

input:-webkit-autofill {
    /* removes ugly yellow auto fil color in Chrome*/
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
3

That is the auto-complete. Remove it using this script. Copy and paste it in the [Site Settings] > [Custom Code (before body tag)] field:

<script>
Webflow.push(function() {
  // No autocomplete for all forms
  $('form').attr('autocomplete', 'off');
});
</script>
4

@jdesign Thanks, it works! but after placing your code I have got a white box instead of yellow. I can get that this is a stupid question, but still how I can make it just transparent? (can I right a word “alpha” instead of “white”? Sorry, I am a ZERO in code ))))

5

Style the background of he field transparent in Webflow.

6

@samliew I would love to try your script, but … a…, if I don’t have a body tag, my custom code field was empty actually, cause I don’t work with code at all )). Thanks Webflow, I can now make such pages by myself http://marina-sailing.webflow.io

7

it is transparent in webflow )) but becomes white after I enter the e-mail into the field here in the footer http://marina-sailing.webflow.io/

8

See screenshot on where to paste the code:

1700×1998 95.1 KB

Then re-publish site.

9

@samliew Will that script also turn the auto complete for adding info like email address off in Chrome?

@tatsis Mac or windows, what browser? This is what it looks like on Chrome (Mac).

10

@jdesign Windows Chrom… yea, it looks great (transparent) while you are entering something… but if you enter a valid e-mail (you can try mine one supertatsis@gmail.com) and push “enter”, you will get an ugly white box Screenshot by Lightshot

11

Can I get your read-only link?

12

Yes, can be tested by pasting $('form').attr('autocomplete', 'off'); directly into the console.

13

thanks @samliew, I did that… published, but nothing have changed (I meen I placed the script into a custom code field)

Yes, can be tested by pasting $(‘form’).attr(‘autocomplete’, ‘off’); directly into the console.

this last text is if you are speaking in Chinese :slight_smile:

14

I entered an email address in Chrome and sent. Never saw a white background. Blue placeholder text that became white when I typed. Try incognito mode…maybe something in cache.

15

still white box, in incognito as well… ok, I think it is an issue of chrom for Windows
Thank you both!

16

One last try, in Webflow…change the focus state to transparent. It might already be but if you click a color and then back to transparent it might change. It might be a long shot
:grinning:

17

sorry, I was seek for a few days… tried to change a focus state, didn’t work )). One more thing, this white box appears when chrome auto-suggests the e-mails, that it has remembered before Screenshot by Lightshot
And if you choose one from the list it suggests, then the white box comes Screenshot by Lightshot

18

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.