条纹元素图标填充问题答案

【问题标题】：Stripe Elements Icon Padding Issue条纹元素图标填充问题
【发布时间】：2021-02-26 17:07:55
【问题描述】：

我在我的网站上使用 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 拉入的，所以我的样式没有任何作用。

【问题讨论】：

标签： stripe-payments

【解决方案1】：

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

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

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

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

【讨论】：