更改信用卡占位符颜色

Posted 2023-03-05

【中文标题】更改信用卡占位符颜色

【英文标题】：Changing Credit Card Placeholder color

【发布时间】：2018-10-29 18:53:26

【问题描述】：

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

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

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

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

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

【参考方案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/

【参考方案2】：

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

React Elements for Stripe https://stripe.dev/elements-examples/

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

【参考方案3】：

输入您的 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 是十六进制颜色的代码（选择适合您口味的代码here）。十六进制颜色代码后面的 30 定义了不透明度（如果您希望颜色稳定，可以将其删除，或者只是在 01 到 99 之间使用它） - 选择权在您手中。

玩弄你的代码，看看你能实现什么:)

【讨论】：

嗨，这只会改变背景颜色，而不是占位符文本颜色。即使添加颜色：CSS 它仍然不会更改占位符文本的文本颜色。关于如何实现这一目标的任何想法？

那是不可能的。显示信用卡号的部分是一个 iframe - 它从 Stripe 端获取 javascript 和 CSS，并且无法以您想要的方式自定义 CSS 进行编辑。您可能想直接联系他们 (support.stripe.com) 并询问他们如何编辑 .js 文件以满足您的需求。

嗯，好的，谢谢您的调查。我可以联系他们问这个问题。或者更改表单的颜色以更好地适应占位符文本

这也是一个解决方案 - 更改表单颜色，但我仍然建议您与他们联系，以便您也可以自定义该部分:)