使用 NextJS 更改 Stripe 支付的自动填充颜色

Posted 2023-03-21

【中文标题】使用 NextJS 更改 Stripe 支付的自动填充颜色

【英文标题】：Change the color of autofill for Stripe payment with NextJS

【发布时间】：2021-09-30 17:48:13

【问题描述】：

我们在 NextJS 中使用 Stripe 的 Element 支付功能。 只有this link中与元素支付相关的部分被取出使用。

我用

.StripeElement--webkit-autofill 
  background-color: #2E365630 !important;

这个代码(reference)在我使用信用卡时在自动完成功能中填写数字时改变背景颜色，但它没有改变。

我不确定这有多相关，但是

const CARD_OPTIONS = 
  iconStyle: 'solid' as const,
  style: 
    base: 
      iconColor: '#FFFFFF',
      color: '#FFFFFF',
      backgroundColor: '#2E365630',
      fontWeight: '500',
      fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
      fontSize: process.browser ? (window.innerWidth < 480 ? "16px" : "20px") : "16px",//'16px',
      fontSmoothing: 'antialiased',
      ':-webkit-autofill': 
        color: '#FFFFFF',
      ,
      '::placeholder': 
        color: '#FFFFFF80',
      ,
    ,
    invalid: 
      iconColor: '#ef2961',
      color: '#ef2961',
    ,
  ,
;

这是卡片选项。

如果您不介意我问的话，我在官方文档中找不到更改自动填充背景选项的解释（有一个用于文本颜色）。

【参考方案1】：

条带化文档how to set styles in Elements for pseudo-classes in the Stripe.js reference。

事实上，您已经在上面的代码中使用了该方法来设置前景色：

      ':-webkit-autofill': 
        color: '#FFFFFF',
      ,

如果您希望它也设置背景颜色，您可以像添加任何其他属性一样添加它：

      ':-webkit-autofill': 
        color: '#FFFFFF',
        backgroundColor: '#2E365630',
      ,

【讨论】：

感谢您的回答！但是，背景仍然是白色的。这可能是因为 backgroundColor 应该只对选择伪类起作用。如果您有任何其他知识，请与我们分享。

啊，apparently autofill is special and you can't change the background color without using a workaround that involves box-shadow。 Stripe.js 的 API 不允许你设置 box-shadow，所以我认为这是不可能的。很抱歉造成误会！