条纹元素图标填充问题

Question

我在我的网站上使用 Stripe Elements，但运行图标样式存在一些问题。我做了一些搜索并找到了这个 link 但他们已经关闭了工单说问题已解决。

正如您在我的屏幕截图中看到的那样 here 图标与边缘齐平，我想要在左侧填充一些内容。

我试过像这样通过我的 JS 添加填充，但它没有改变任何东西。

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",
    },
};

我什至尝试通过 CSS 添加它，但因为它是通过 iframe 引入的，所以我的样式没有任何作用。

Answer 1

您需要更改将元素装载到的容器的样式，而不是元素本身。例如，如果您将卡片元素安装到 #card-element，您可以添加一些基本样式，如下所示：

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

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

您可以在此处阅读更多相关信息：https://stripe.com/docs/js/element/the_element_container?type=card

条纹元素图标填充问题

Stripe Elements Icon Padding Issue

stripe-payments