Streaming live at 10am (PST)

Color of standard yellow box in the e-mail form

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: http://prntscr.com/agvtdr
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)

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

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>

@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 ))))

Style the background of he field transparent in Webflow.

@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

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/

See screenshot on where to paste the code:

Then re-publish site.

@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).

@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 http://prntscr.com/agwpcm

Can I get your read-only link?

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

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:

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.

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

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:

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 http://prntscr.com/ahynhn
And if you choose one from the list it suggests, then the white box comes http://prntscr.com/ahyo2b

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