如何使用CSS对Bigcommerce购物车集成上的Stripe输入进行样式设计？
如何使用CSS对Bigcommerce购物车集成上的Stripe输入进行样式设计？
提问于 2022-03-10 06:14:37
我正在使用Stripe作为我的支付处理器在BigCommerce上。它工作得很完美。问题是我的网站主题有一个黑色的背景。当你键入你的信用卡信息，文本是黑色的条形输入，所以你看不到它。我尝试在checkout.scss和优化的CSS中使用CSS来尝试和覆盖它，但是由于Stripe是通过JS加载的，而且看起来是iFrame，我无法理解它。
我已经将这个css添加到两个中，但仍然无法工作。
input {
color: #eee !important;
}回答 2
Stack Overflow用户
发布于 2022-03-10 06:36:56
也许你可以用JavaScript做这个，
document.getElementById("element_id").style等。
我之前并没有这么做，但是这个解决方案适用于这些类型的场景！
Stack Overflow用户
发布于 2022-03-10 12:47:02
但是由于Stripe是通过JS加载的，而且看起来是iFrame，所以我无法理解它。
确实是这样！它不使用CSS中的样式，您必须在创建元素时通过传递样式对象通过Javascript指定它：
https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-style
https://stripe.dev/elements-examples/
如果您不是编写在这个级别上与stripe.js交互的代码的人，那么您可能希望接触Bigcommerce或其他什么东西，要求他们以某种方式公开访问权限。
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();
var card = elements.create('card', {
style: {
base: {
iconColor: '#666EE8',
color: 'white', // color of the text : https://stripe.com/docs/js/appendix/style
lineHeight: '40px',
fontWeight: 300,
fontFamily: 'Helvetica Neue',
fontSize: '15px',
'::placeholder': {
color: '#CFD7E0',
},
},
}
});
card.mount('#card-element');* {
font-family: "Helvetica Neue", Helvetica;
font-size: 15px;
font-variant: normal;
padding: 0;
margin: 0;
}
body {
background: #171515;
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
form {
width: 480px;
margin: 20px 0;
}
.group {
box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
0 3px 6px 0 rgba(0,0,0,0.08);
border-radius: 4px;
margin-bottom: 20px;
}
label {
position: relative;
color: #8898AA;
font-weight: 300;
height: 40px;
line-height: 40px;
margin-left: 20px;
display: flex;
flex-direction: row;
}
.group label:not(:last-child) {
border-bottom: 1px solid #F0F5FA;
}
label > span {
width: 80px;
text-align: right;
margin-right: 30px;
}
.field {
background: transparent;
font-weight: 300;
border: 0;
color: #31325F;
outline: none;
flex: 1;
padding-right: 10px;
padding-left: 10px;
cursor: text;
}
.field::-webkit-input-placeholder { color: #CFD7E0; }
.field::-moz-placeholder { color: #CFD7E0; }<script src="https://js.stripe.com/v3/"></script>
<body>
<form>
<div class="group">
<label>
<span>Card</span>
<div id="card-element" class="field"></div>
</label>
</div>
</form>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71419604
复制相关文章
相似问题
腾讯云开发者
