Streaming live at 10am (PST)

Color of standard yellow box in the e-mail form


#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: 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)


#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:

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


#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 :slightly_smiling:


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


#18

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