Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to override iOS Safari AutoFill in web dropin component #1240

Closed
tmadison-gpsw opened this issue Aug 6, 2021 · 2 comments
Closed
Labels
Enhancement New feature or request v6 Included in the next major release

Comments

@tmadison-gpsw
Copy link

tmadison-gpsw commented Aug 6, 2021

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

Screen Shot 2021-08-06 at 2 36 15 PM

Screen Shot 2021-08-09 at 10 15 17 AM

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!

@sponglord sponglord added the Enhancement New feature or request label Sep 20, 2022
@ribeiroguilherme ribeiroguilherme added the v6 Included in the next major release label Sep 20, 2023
@camil-adyen
Copy link
Contributor

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
Copy link
Contributor

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

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Enhancement New feature or request v6 Included in the next major release
Projects
None yet
Development

No branches or pull requests

4 participants