WPForm CSS Help

Yep you are correct, sorry i missed this.

There looks to be a autofill colour as well

I am trying this code

input:-webkit-autofill {
    background-color: rgba(75, 220, 56, 0.25);
    background-image: none;
    color: rgb(0, 0, 0);
}

to change the colour from yellow but its not working?

Any ideas?

I’ve tried all sorts now and cant work this one out for the life of me ahaha

I’m not sure I understand. In my understanding I would just use the ‘color’ style.

I have also tried using the color style.

I cant seem to override the auto filled field color with any though? Any idea if i am using the correct selectors or what selector i need to use?

Thanks,

Harvey

Does this do what you want:

/* Valid input value colour */
body div.wpforms-container-full .wpforms-form .wpforms-valid {
    color: white;
}

/* Invalid input value colour */
div.wpforms-container-full .wpforms-form .wpforms-field input.wpforms-error {
    color: red;
}

It is that there looks to be some CSS that sets the color of the field if an auto-fill option has been used.

I am needing to change the color the field goes when the field is auto filled.

Do you get what I mean? Sorry its an awkward one to explain.

What do you mean by auto filled?

Hi,

please see here – https://ibb.co/gve8Bk The code changing the colour.

If you use chrome and add some auto fill info https://support.google.com/chrome/answer/142893?co=GENIE.Platform%3DDesktop&hl=en this shows how to add autofill info manually into chrome. But autofill info is usually automatically gathered by a browser to allow quicker entry of field in forms on a site like the below image.

https://ibb.co/kyLRxQ

Does this explain it?

Thanks,

Harvey

And when the contact form uses the autofill details it is changing the field color to yellow. As you can see in the code i provided in the first image. I just can’t seem to change this

Oh autofilled by the browser, see this article: https://developer.mozilla.org/en-US/docs/Web/CSS/:-webkit-autofill

The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks.

Ohh? So is it Chrome that is actually making the field yellow when autofill is used rather than my contact form? As in firefox i see this does not happen when using autofill?

Yes, this is a browser feature and is not specific to your website or platform (WordPress).

Okay thank you ??