Stripe Payment fields font color change

[andrewrubio]

Hi, I’ve set up an e-commerce section of my website and the website has a dark theme so the background is black. I’ve styled the checkout process to follow that theme however the fields for payment (card details, expiry date, security code) forces a black text, which is invisible to the user because the field background is also black.

I’ve already applied the form fields in Webflow to have white Color, and for all the parent elements It seems to be temperamental as sometimes the field finally has the text in white, and sometimes it doesn’t and is black when you are typing then turns into red when you click out of the field as if there’s an error with it. I’m really not sure what’s happening here but I also inspected the page through dev tools and saw that each field is an iframe from Stripe and so even targeting the fields through JS doesn’t really work.

Has anyone had experience with this or have any ideas?

Check it out here: https://onesixone.co/checkout

(You may need to add something to your cart first - https://onesixone.co/product/alpha-neue-typeface)

Here I had to make the field background slightly grey as this is far as I can go with the theme but it’s still not legible:

When you click off, it then looks like this, whereas I’d want the text to be white:

EDIT: I’ve just found that when I deploy the website again, it works, hence why it has been temperamental. I’m not sure what causes it to break again on the next deploy though. If anyone knows what it could be or how to force the font to be white regardless of the deploy that would be awesome

Thanks!
Andrew

[maciejjasinski (Maciej Jasiński)]

Hi @andrewrubio

Even though these inputs are coming from Stripe, you should be able to use a Placeholder pseudo class right in the Designer

Please let me know if you have additional questions!
Maciej

[andrewrubio]

Hi @maciejjasinski thanks for your quick response! Actually the placeholder text is fine in grey as it’s still faintly visible, it’s more the actual text that the user will start to type in that sometimes appears in black. It’s hard to test now because it’s working though!

[11199 (Dmytro KH)]

Hello @andrewrubio . I have the same issue. I think it happens because of the Iframe inside the input field. And Stripe has its own styles inside this Iframe. I’m not a CSS or JS pro, but I believe it’s possible to override these styles somehow.

[stau5 (Steve Rouse)]

For anyone still stuck on this, setting a color for the payment fields input:focused state seem to override Stripe’s styles.

[Jai]

It may not work if your ‘input’ field is inheriting color from a parent.

Try assigning a color to the ‘input’ field directly (even though it is the same color).

[jakobg (Jakob Gerritz)]

Probably you have already found a solution or gave up on it…

But in case anybody (like me) stumbles across this problem:

The solution for this is to give the field an invert filter:

For me this was the only solution that worked.

[yurchax (Arthur)]

Ran into the same issue and nothing seemed to work.

Turns out the font color was ignored if it was coming from a Variable.

So just dropping by to let others know that what worked in my case was detaching it from the Variable and manually setting the white color (again), similar to what Jai mentioned above.