Ability to override iOS Safari AutoFill in web dropin component

[tmadison-gpsw]

Describe the bug Override iOS Safari Auto fill background color on dropin component.

Expected behavior Able to override the default styles of the inputs such as:

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 {
  background-color: #111 !important;
  box-shadow: 0 0 0px 1000px #111 inset !important;
  -webkit-background-fill-color: #111 !important;
  -webkit-box-shadow: 0 0 0px 1000px #111 inset !important;
  -webkit-text-fill-color: white !important;
  background-color: rgb(17, 17, 17) !important;
  background-clip: content-box !important;
}

Is this possible?

Thank you!

[camil-adyen]

Hi all!

A BETA version of Web v6 is now available on Github. Feel free to take a look and give us feedback! We aim to release the official v6 in the coming weeks. More information can be found here.

[sponglord]

The major release, v6.0.0, was launched today! See the documentation here:

• release notes
• migration guide

For you specific issue you need will need to generally override the input's background colour somewhere in your own stylesheet e.g.

:root {
    --adyen-sdk-color-background-primary:yellow;
}

And then when you configure the Card component, pass in a styles object e.g.

window.card = new Card(checkout, {
  styles: {
    base: {
      background: 'yellow'
   }
}

to ensure the background colour of the iframe is also changed.