Streaming live at 10am (PST)

Stripe Payment fields font color change

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 :slight_smile:

Thanks!
Andrew

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

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!