更改信用卡占位符颜色

Question

我刚刚在此网站上添加了信用卡支付功能（您可能需要将商店中的商品放入购物篮中，然后才能转到结帐页面）。

在底部，您可以看到信用卡详细信息的输入位置。

我已经自定义了表单，最后一步是更改占位符文本的颜色。占位符的图像 这些在此图像中突出显示。

在检查此颜色的设置位置时，我找不到 CSS 代码。

有没有另一种方法可以找到颜色，或者任何人都可以指出我正确的代码。

Answer 1

如果其他人仍然希望更改条带信用卡元素的占位符或任何其他 css 属性，请查看涵盖此用例的 jsfiddle。

这是带有自定义占位符的条纹卡元素的预览

这是您需要为卡片元素定义样式的方式：

var style = {
base: {
  iconColor: '#666EE8',
  color: '#31325F',
  lineHeight: '40px',
  fontWeight: 300,
  fontFamily: 'Helvetica Neue',
  fontSize: '15px',

  '::placeholder': {
    color: '#CFD7E0',
  },
},
};

https://jsfiddle.net/2a9fjyuh/

Answer 2

输入您的 WordPress 定制器并添加此自定义 CSS 代码并根据您的喜好进行编辑：

#stripe-card-element.StripeElement.empty {
background: #ffffff30 !important;
}
#stripe-exp-element.StripeElement.empty {
background: #ffffff30 !important;
}
#stripe-cvc-element.StripeElement.empty {
background: #ffffff30 !important;
}

该部分控制占位符的背景。这是什么意思？是#stripe元素的一部分。如果您会看到您有“card-element”、“exp-element”和“cvc-element”。每个人编辑不同的部分。人们将编辑信用卡号元素的背景、到期日期元素之一和 CVC 元素的最后一个。

#fffff 是十六进制颜色的代码（在此处选择适合您口味的代码）。十六进制颜色代码后面的 30 定义不透明度（如果您希望颜色是纯色，可以删除它，或者只是在 01 到 99 之间使用它） - 选择权在您。

尝试一下你的代码，看看你能实现什么:)