Set background colour of input field when auto-filled

Ask us anything How do I?
1

I’ve tried a few methods with no luck.

How do I set the css properties of an input field so that when an input field is auto-filled the background colour of the input remains transparent?

Fairly ugly look this

image

2

I see a Boolean variable to store whether or not an input is prefilled and then have a state on the element that controls background color, read-only etc.

3

I searched an answer for this, and its not very clear about what is doable or not, as it really depends on the user settings and browser

(For context, this is not implemented in browser often for security/accessibility reason, they do not want you to hide this)

1 Like
4

Thanks @aurelie

For anyone who might want similar control here is the result.

Add the custom code to the page head

image

Here is the snippet I ended up using for my use case

<style>
/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #434346;
  -webkit-text-fill-color: #F1F1F1;
  -webkit-box-shadow: 0 0 0px 1000px #1B1B1C inset;
  transition: background-color 5000s ease-in-out 0s;
};
</style>

NB: the styling only takes affect when published (not in editor preview)

1 Like