rafaelgibelli

[mortal aspen]

Hi @mortal sapphire ! thanks for being around

I'm currently using the following base styles:

  base: {
    color: "black",
    fontSize: "1.25rem",
    fontWeight: "600",
    lineHeight: "1.75rem",
    "::placeholder": {
      color: "black",
    },
    ':-webkit-autofill': {
      backgroundColor: '#FFFFFF',
      border: "0px",
      outline: "none",
      "-webkit-box-shadow": "0 0 0px 1000px transparent inset",
      transition: "background-color 5000s ease-in-out 0s"
    },
    ':-webkit-autofill:hover': {
      backgroundColor: 'green',
      border: "0px",
      outline: "none",
      "-webkit-box-shadow": "0 0 0px 1000px transparent inset",
      transition: "background-color 5000s ease-in-out 0s"
    },
    ':-webkit-autofill:focus': {
      backgroundColor: 'green',
      border: "0px",
      outline: "none",
      "-webkit-box-shadow": "0 0 0px 1000px transparent inset",
      transition: "background-color 5000s ease-in-out 0s"
    }
  },
  invalid: {
    color: "rgb(239 68 68)",
  },
};```

Also, using the separate elements, like CardNumberElement, CardExpiryElement etc

[mortal sapphire]

Hello, I am less familiar with how to style that element so I will reach out to my colleagues who have a better idea and will get back to you with what I can find.

[mortal aspen]

many thanks!

[mortal sapphire]

My colleagues said that there isn't a stripe-specific solution here but the answers on this stack overflow should let you remove that background https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete

[mortal aspen]

that's exactly what's on the code I sent you for the styles

the problem is that these properties are not being passed to stripe's input

and since it's inside an iframe, It's a separate window so nothing I do on my css will work that input because I don't have access to it

[mortal sapphire]

My apologies, seems I misunderstood my colleagues. Will ask them for clarification and get back to you again

[mortal aspen]

thanks a lot

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: 0px;
  outline: none;
  background-color: transparent;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}
.input-onboarding {
  -webkit-text-fill-color: white;
}

.input-billing {
  -webkit-text-fill-color: black;
}
.ElementsApp input:-webkit-autofill {
  -webkit-text-fill-color: transparent;
}```

this is already on my global styles, all the other inputs are fine with the autocomplete

sorry if I sounded rude, thanks for your assistance

[mortal sapphire]

No worries, did not sound rude. Apologies but still trying to figure out how to debug this. Setting webkit-autofill in your style settings should be how this is defined. Have you been able to get that autofill to work anywhere else Stripe-wise? If you create a page that is just the card element with that style does the autofill get colored properly?

[mortal aspen]

yeah, all my other inputs are working fine with that global style

I just added this global style, prior to that all of the inputs were being autofilled.. creating

there's no interference from the outside styles, that's a user agent stylesheet being applied to stripe's element

I think the webkit-autofill is not being passed down to the input

[ornate pike]

👋 stepping in