Styling of card details form in “updated checkout experience”

Yeah, I’ll post a suggestion about this on github, and the workaround is probably enough for many people as long as they are ok with the fields having the same styling as the #billing_first_name field.

Do note though that not all styling properties are used from the #billing_first_name field when creating the .Input styling. The properties I’ve found that can be used are:

1. backgroundColor
2. borderBottomColor
3. borderBottomLeftRadius
4. borderBottomRightRadius
5. borderBottomStyle
6. borderBottomWidth
7. borderLeftColor
8. borderLeftStyle
9. borderLeftWidth
10. borderRightColor
11. borderRightStyle
12. borderRightWidth
13. borderTopColor
14. borderTopLeftRadius
15. borderTopRightRadius
16. borderTopStyle
17. borderTopWidth
18. boxShadow
19. color
20. fontFamily
21. fontSize
22. fontWeight
23. letterSpacing
24. lineHeight
25. outline
26. outlineOffset
27. paddingBottom
28. paddingLeft
29. paddingRight
30. paddingTop
31. textDecoration
32. textShadow
33. textTransform

Hi there @fredrikvestin!

GitHub is the right place to post this.

The style transients are stored in wc_stripe_upe_appearance and are inherited from the billing field styles.

You can adjust your Billing fields CSS -> Clear transients -> preview the output in the credit card fields.

I believe you’ve posted it on GitHub: https://github.com/woocommerce/woocommerce-gateway-stripe/issues/2514 so I am going to mark this thread as resolved. Please feel free to post your findings about which styles are inherited in your GitHub report.

Please let us know if you have any questions! ??