条纹元素图标填充问题

问题描述

我在我的网站上使用条纹元素，但遇到了一些图标样式问题。我进行了一些搜索并找到了这个 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 引入的，所以我的样式没有任何作用。

解决方法

您需要更改挂载元素的容器的样式，而不是元素本身。例如，如果您将卡片元素安装到 #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 stripe-payments