无法识别商业信用卡表单的文本输入 CSS 选择器
Posted
技术标签:
【中文标题】无法识别商业信用卡表单的文本输入 CSS 选择器【英文标题】：Unable to identify text input CSS selectors for commercial credit card form 【发布时间】：2018-07-08 04:07:54 【问题描述】：在深色背景上使用这种深色字体是不可取的：
我想重新设置输入文本的样式，但无法识别此商业信用卡表单使用的相关 CSS 选择器。
演示网站在这里：https://store.ashenglowgaming.com （您必须在购物车中随机放入一些东西，然后前往结帐屏幕以调出信用卡表格。）
官方文档（在这里找到https://stripe.com/docs/stripe-js/reference#stripe-elements）有点难以理解。
编辑：这是我试图用我自己的color 覆盖的 html/CSS。它位于 HTML 文档正文中的 <iframe> 标签内，因此我不确定它是否可以被外部 CSS 样式表覆盖。
<iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame4" allowpaymentrequest="true" src="https://js.stripe.com/v3/elements-inner-card-305fa942e2b9d7b32be28e14bb9dff11.html#style[base][iconColor]=%23666EE8&style[base][color]=%2331325F&style[base][fontSize]=15px&style[base][::placeholder][color]=%23CFD7E0&componentName=cardNumber&wait=false&rtl=false&features[noop]=true&origin=https%3A%2F%2Fstore.ashenglowgaming.com&referrer=https%3A%2F%2Fstore.ashenglowgaming.com%2Fcheckout%2F%3Fccp-iframe%3Dtrue&controllerId=__privateStripeController1" title="Secure payment input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; height: 18px;">
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="fingerprinted/css/ui-shared-3f0e69d72db3ce3b520f344481d0f7a4.css" rel="stylesheet">
<style>.CardBrandIcon-containerheight:100%;position:absolute;top:0;text-align:center;width:1.5em;-webkit-perspective:1000px;perspective:1000px.CardBrandIconposition:relative;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:-webkit-transform .5s cubic-bezier(.075,.82,.165,1);transition:transform .5s cubic-bezier(.075,.82,.165,1);transition:transform .5s cubic-bezier(.075,.82,.165,1),-webkit-transform .5s cubic-bezier(.075,.82,.165,1);transition-timing-function:cubic-bezier(.075,.82,.165,1);height:100%.CardBrandIcon-innermargin:0;padding:0;position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;width:1.5em.CardBrandIcon.is-amex .CardBrandIcon-innertransition:opacity .5s cubic-bezier(.075,.82,.165,1);transition-timing-function:cubic-bezier(.075,.82,.165,1).CardBrandIcon-inner--frontz-index:2;-webkit-transform:rotateY(0);transform:rotateY(0).CardBrandIcon-inner--backz-index:1;-webkit-transform:rotateY(180deg);transform:rotateY(180deg).CardBrandIcon img,.CardBrandIcon svgposition:absolute;left:0;top:50%;margin-top:-.55em;height:1em;-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);opacity:0.CardBrandIcon.is-loaded img,.CardBrandIcon.is-loaded svgtransition:opacity .7s cubic-bezier(.075,.82,.165,1),-webkit-transform .4s cubic-bezier(.075,.82,.165,1);transition:transform .4s cubic-bezier(.075,.82,.165,1),opacity .7s cubic-bezier(.075,.82,.165,1);transition:transform .4s cubic-bezier(.075,.82,.165,1),opacity .7s cubic-bezier(.075,.82,.165,1),-webkit-transform .4s cubic-bezier(.075,.82,.165,1);transition-timing-function:cubic-bezier(.075,.82,.165,1);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1.CardBrandIcon-container.is-hidden .CardBrandIcon.is-loaded img,.CardBrandIcon-container.is-hidden .CardBrandIcon.is-loaded svg-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);opacity:0.CardBrandIcon.is-cvc-webkit-transform:rotateY(180deg);transform:rotateY(180deg).CardBrandIcon.is-amex-webkit-transform:rotateY(0);transform:rotateY(0).CardBrandIcon.is-amex .CardBrandIcon-inner--backopacity:0;-webkit-transform:rotateY(0);transform:rotateY(0).CardBrandIcon.is-amex.is-cvc .CardBrandIcon-inner--backopacity:1;z-index:3.CardBrandIcon.is-amex.is-cvc .CardBrandIcon-inner--front,.CardBrandIcon.is-amex.is-cvc-hidden .CardBrandIcon-inner--back,.CardBrandIcon.is-cvc-hidden .CardBrandIcon-inner--backopacity:0.CardField .CardBrandIcon-containerz-index:2.CardField:hovercursor:text.CardField--unacceleratedTranslate .CardField-childtransition:right .4s cubic-bezier(.25,.46,.45,.94).CardField-input-wrapperposition:absolute;left:0;right:0;white-space:nowrap;overflow:hidden.CardField-input-wrapper.is-ready-to-slidetransition:.4s cubic-bezier(.25,.46,.45,.94);transition-property:left,right.CardField--ltr .CardBrandIcon-container:not(.is-hidden)+.CardField-input-wrapperleft:2em.CardField--rtl .CardBrandIcon-container:not(.is-hidden)+.CardField-input-wrapperright:2em.CardField--ltr .CardBrandIcon-containerleft:0.CardField--rtl .CardBrandIcon-containerright:0.CardField-number-fakeNumberposition:absolute;pointer-events:none.CardField-number-fakeNumber-last4position:absolute;top:0.CardField--ltr .CardField-number-fakeNumber-last4right:0.CardField--rtl .CardField-number-fakeNumber-last4left:0.CardField-number-fakeNumber-numberopacity:0.CardField-number .CardField-number-fakeNumber,.CardField-number input,.CardField-number input:-webkit-autofilltransition:background-color 100000000s,opacity .3s cubic-bezier(.25,.46,.45,.94);transition-timing-function:cubic-bezier(.25,.46,.45,.94).CardField-number .CardField-number-fakeNumber,.CardField-number inputopacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1).CardField-number .CardField-number-fakeNumber,.CardField-number.is-hidden input[name=cardnumber].InputElement+.Input-placeholder--ieopacity:0.CardField-number.is-hidden .CardField-number-fakeNumberopacity:1.CardField-number.is-hidden input[name=cardnumber]opacity:0.CardField input::-ms-cleardisplay:none.CardField-childz-index:1;display:inline-block;position:relative;transition:opacity .4s cubic-bezier(.55,.055,.675,.19),-webkit-transform .4s cubic-bezier(.25,.46,.45,.94);transition:opacity .4s cubic-bezier(.55,.055,.675,.19),transform .4s cubic-bezier(.25,.46,.45,.94);transition:opacity .4s cubic-bezier(.55,.055,.675,.19),transform .4s cubic-bezier(.25,.46,.45,.94),-webkit-transform .4s cubic-bezier(.25,.46,.45,.94);-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)</style>
</head>
<body>
<div id="root">
<form class="ElementsApp is-invalid" dir="ltr">
<style>
.ElementsApp, .ElementsApp .InputElement
color: #31325F;font-size: 15px;
.ElementsApp:not(.is-autofilled) .InputElement:-webkit-autofill
color: #31325F;
-webkit-text-fill-color: #31325F;
.ElementsApp .Icon-fill
fill: #666EE8;
.ElementsApp .InputElement + .Input-placeholder--ie
opacity: 1;color: #CFD7E0;
.ElementsApp .InputElement::-webkit-input-placeholder
opacity: 1;color: #CFD7E0;
.ElementsApp .InputElement::-moz-placeholder
opacity: 1;color: #CFD7E0;
.ElementsApp .InputElement:-ms-input-placeholder
opacity: 1;color: #CFD7E0;
.ElementsApp .InputElement::placeholder
opacity: 1;color: #CFD7E0;
</style>
<span tabindex="-1" aria-hidden="true" style="opacity: 0; pointer-events: none; height: 2px; width: 2px; position: absolute; top: -2px;">0123456789０１２３４５６７８９</span><input tabindex="0" aria-hidden="true" class="StripeField--fake" autocomplete="fake" style="opacity: 0; pointer-events: none; height: 2px; width: 2px; position: absolute; top: -2px;" disabled=""><span><label class="Input" data-max="4242 4242 4242 4242 4240"><input type="tel" autocomplete="cc-number" autocorrect="off" spellcheck="false" name="cardnumber" class="InputElement is-invalid" aria-label="Credit or debit card number" placeholder="1234 1234 1234 1234" aria-placeholder="1234 1234 1234 1234" aria-invalid="true" value="3223 "></label><input tabindex="-1" aria-hidden="true" autocomplete="cc-exp-month" name="cc-exp-month" style="opacity: 0; pointer-events: none; height: 2px; width: 2px; position: absolute; top: -2px;"><input tabindex="-1" aria-hidden="true" autocomplete="cc-exp-year" name="cc-exp-year" style="opacity: 0; pointer-events: none; height: 2px; width: 2px; position: absolute; top: -2px;"><input tabindex="-1" aria-hidden="true" autocomplete="cc-cvc" name="cc-cvc" style="opacity: 0; pointer-events: none; height: 2px; width: 2px; position: absolute; top: -2px;"></span><input tabindex="0" aria-hidden="true" class="StripeField--fake" autocomplete="fake" style="opacity: 0; pointer-events: none; height: 2px; width: 2px; position: absolute; top: -2px;" disabled=""><button tabindex="-1" aria-hidden="true" type="submit" style="opacity: 0; pointer-events: none; height: 2px; width: 2px; position: absolute; top: -2px;"></button>
</form>
</div>
<script type="text/javascript" src="fingerprinted/js/shared-46d943f68427ab46131c608f0101fa64.js"></script><script type="text/javascript" src="fingerprinted/js/ui-shared-1023c90b2a41d9c8f93958f6e8e8698f.js"></script><script type="text/javascript" src="fingerprinted/js/elements-inner-card-f9792239cbf3f10e4e7207f8c045788a.js"></script>
</body>
</html>
</iframe>
【问题讨论】：
你试过这个问题的建议了吗？ ***.com/questions/470702/… 我认为问题在于我应用的任何样式都会被 JS 自动覆盖。目前似乎没有人能够提供帮助。 你不能用 CSS 覆盖 iframe 中的对象。 @Germano 我担心会变成这样，但这就是很多人对我说的。 要生成人们要求的minimal reproducible example，您可以将 HTML 保存在表单中并将其粘贴到 JS Fiddle 中吗？您可以将其缩减到最低限度，以便为读者简化问题。 【参考方案1】：您可以使用浏览器的网络检查器查找以下 CSS：
.ElementsApp, .ElementsApp .InputElement
color: #31325F;
font-size: 15px;
将颜色设置为例如#fff 使输入文本变为白色。
【讨论】：
恐怕我试过了 - 它不起作用。要是这么简单就好了…… 如何覆盖/更改样式？确保您的更改具有更高的特异性或使用（不推荐！）!important 语句。 我尝试了!important 资格，但没有成功。
好的，您必须提供Minimal, Complete, and Verifiable example 以便我们找到解决方案...
我意识到这一点。问题是我不知道什么是相关的，因为我没有设计这个表格，它需要在它的生活环境中解决——我害怕遗漏一些重要的东西，表格太复杂和纠结在它的环境中让我提取最少的代码......以上是关于无法识别商业信用卡表单的文本输入 CSS 选择器的主要内容，如果未能解决你的问题，请参考以下文章