Is there a way to change the autofill input color

Ask the community
,
1

I can see that when I inspect the page, there is this CSS code that seems to run when autofill-selected, it sets the background-color to RGB(232, 240, 254). Is there a way to modify this?

I tried the following, but it doesn’t seem to over-write

$w . onReady ( function () {
$w ( “#email” ). style . backgroundColor = “#1A2D4E !important”
$w ( “#password” ). style . backgroundColor = “#1A2D4E !important”
});

I basically don’t want the input background color to change when auto-filled. So I want it to match the backgroundColor which is #1A2D4E or simply just not change the color at all.

It will be a big help. Thank you.

2
  1. $w (“#myElement”). style . backgroundColor= “rgb(255,0,0)”;
  2. $w (“#myElement”). style . backgroundColor= “rgba(255,0,0,0.5)”;
  3. $w (“#myElement”). style . backgroundColor= “red”;
  4. $w (“#myElement”). style . backgroundColor= " #1A2D4E ";
$w.onReady(function(){
    $w("#email").style.backgroundColor="rgba(255,0,0,0.5)";
});

In this case you choose a custom INPUTFIELD-element. Giving it a RGBA-color, to be able to modify the opacity aswell.

3

Has it been solved? The answer from Velo-Ninja is very general and unfortunately does not change the grey color on autofill of an input field.

4

First question would be —> what do you mean by → onAutofill?

  1. onInput( ) ???
  2. onChange( ) ???
  3. onClick( ) ???

These are the 3 possible ones, which would be available.

Second question: Did you set the OPACITY of your ELEMENT to 100% inside the PROPERTY-PANEL in your Wix-Editor?

5

Hi Velo-Ninja.
Autofill as in, when a user authenticate and log in for the first time, the browser asks if a user want to save id/pw. Upon saving them, next time a user visits the website, the id/pw field is “autofilled” with saved data.

I have tried all 3 ones and none of them does the job.
I do not think the Opacity has to do with anything since the color does not even change.

6

Autofill as in, when a user authenticate and log in for the first time, the browser asks if a user want to save id/pw. Upon saving them, next time a user visits the website, the id/pw field is “autofilled” with saved data

Where did you get this function from ?

Do you have a custom code for this functionality?
Did you code it on your own?
Or do you use something predefined like an APP ?
Do you have an OWN DATABASE for that functionality?

Show a pic and try to describe a little bit more.
You do not provide enough informations.

7

Hi Velo-Ninja, thank you for replying.

To answer your questions:

Where did you get this function from ?

  • I am using a default form from Signup & Login page → Member Login Form (Custom).

1420×755 54.6 KB

Do you have a custom code for this functionality?

  • I was trying to build one that can “change the autofill input color”

Did you code it on your own?

  • I did not code anything. It seems like it’s a default function that Wix has. Nothing shows in dev mode as you can see. As you can see from the picture, the password input field has a whitish background.

1101×923 77.5 KB

Or do you use something predefined like an APP ?

  • No

Do you have an OWN DATABASE for that functionality?

  • No

I hope this answers your questions. Thank you.

8

Ok, when using predefined stuff, in most cases you don’t have all the options to work with (to be able to use).

The autofill you are talking about does not really come from Wix.
It is generated out from your own Browser. A browser-function, which works on PASSWORD-FIELDS (on my opinion).

So now your goal is to change color, when the Password-Field is auto-prefilled?

  1. What is the ID of your password-element?
  2. So you want to check if the password-field is prefilled → onLoad of the page?
  3. What if it is? → changing the backgroundcolor of the INPUT-FIELD ?
$w.onReady(function(){
	if($w("#pwInputFieldIDhere").value) {
		console.log("PW-Field has data inside --> green-color");
		$w("#pwInputFieldIDhere").style.backgroundColor="green";
	}
	else {
		console.log("PW-Field has data inside --> red-color");
		$w("#pwInputFieldIDhere").style.backgroundColor="red";
	}	
});

But i don’t think this will work.

What would maybe work is a kind of cyclic-checking-function → using → INTERVAL-FUNCTION <— to check periodic → for example → every 3 sec, if the INPUT-FIELD already has a → VALUE.

Generate your Interval-Function, to check if your PW-FIELD already has a value or not. If so → stop Interval-Check.

Last option would be the onChange-Event of the PW-INPUT-FIELD itself.
But also here not sure if this event ever gets triggered.

Test it out.

I would have to rebuild all your setup first to test it (sorry, i don’t have the time for it).

Maybe i will test it on my own created Login-System here…
https://russian-dima.wixsite.com/login-system/vnloginmgm