Stripe Elements Icon Padding Issue

Question

I'm using Stripe Elements on my site but running into some issues with the icon styling. I've done some searching and found this link but they have closed the ticket saying the issue was fixed.

As you can see on my screenshot here the icon is flush to the edge and I'd like some padding to the left.

I've tried adding padding via my JS like so but it doesn't change anything.

var style = {
    base: {
        iconColor: "#fff",
        padding: "5px 10px 5px 20px",
        backgroundColor: "#a91537",
        color: "#fff",
        fontWeight: "400",
        fontFamily: "Montserrat, sans-serif",
        fontSize: "18px",
        lineHeight: "80px",
        fontSmoothing: "antialiased",
        showIcon: false,
        textIndent: "10px",
        ":-webkit-autofill": {
            color: "#fff",
        },
        "::placeholder": {
            color: "#fff",
        },
    },
    invalid: {
        color: "#fa775a",
        iconColor: "#fa775a",
    },
};

I've even tried adding it via CSS but because it's pulled in via an iframe my styling does nothing.

Answer 1

You need to be changing the style of the container you mount the Element to, not the Element itself. For example, if you were mounting your card element to #card-element you could add some basic styling like this:

<style>
  #card-element {
    padding: 12px;
  }
</style>

<div id="card-element"></div>

You can read more about this here: https://stripe.com/docs/js/element/the_element_container?type=card