wordpress 更改信用卡占位符颜色

wlp8pajw  于 2023-01-04  发布在  WordPress
关注(0)|答案(3)|浏览(149)

我刚刚添加了信用卡支付功能的this网站(您可能需要把一个项目在您的篮子从商店,以便然后去结帐页面)。
在底部,您可以看到信用卡详细信息将在哪里输入。
我已经自定义了表单,最后一步是更改占位符文本的颜色。Image of Placeholders这些在此图像中突出显示。
我找不到CSS代码时,检查到这个颜色是在哪里设置的。
有没有别的方法可以找到颜色或者谁能告诉我正确的代码。

68de4m5k

68de4m5k1#

如果还有人想更改stripe credit card元素的占位符或任何其他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/

hmae6n7t

hmae6n7t2#

是的,我们可以在创建一张卡片或者在JS中创建paymentRequestButton元素时使用CSS定制stripe元素。
条带https://stripe.dev/elements-examples/的React元素
代码示例:https://github.com/stripe/elements-examples/

kyvafyod

kyvafyod3#

进入你的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之间玩它)-选择权在您。

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

相关问题