更改信用卡占位符颜色

Question

我刚刚将信用卡付款功能添加到this网站（您可能需要在商店的商品篮中放置一个商品，然后转到结帐页面）。

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

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

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

我是否有其他方式可以找到颜色，或者有人能指出我正确的代码。

Answer 1

输入您的Wordpress Customizer并添加此自定义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是元素的一部分。如果你看到你有＆＃34; card-element＆＃34;，＆＃34; exp-element＆＃34;和＆＃34; cvc-element＆＃34;。每个人编辑不同的部分。人们将编辑信用卡号码元素的背景，其中一个有效期限元素和最后一个CVC元素。

#fffff是HEX颜色的代码（选择一个适合您口味的here）。 HEX颜色代码后面的30个定义了不透明度（如果你想要你的颜色是实心的，你可以删除它，或者只是从01到99一起玩它） - 你可以选择。

使用您的代码，看看您可以实现的目标：）

Answer 2

如果其他任何人仍在寻找更改条纹信用卡元素的占位符或任何其他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 3

是的，我们可以在CSS中创建卡片或PaymentRequestButton元素时使用CSS自定义条纹元素。

条纹https://stripe.dev/elements-examples/的反应元素

代码示例：https://github.com/stripe/elements-examples/