Question

在深色背景上使用这种深色字体是不可取的：

我想重新设置输入文字的样式，但无法识别此商业信用卡表单使用的相关CSS选择器。

演示网站：https://store.ashenglowgaming.com （你必须在购物车中随意放置一些东西并进入结账界面以显示信用卡表格。）

官方文档（在此处https://stripe.com/docs/stripe-js/reference#stripe-elements）有点难以理解。

编辑：这是我试图覆盖的HTML / CSS，使用我自己的color。它位于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-container{height:100%;position:absolute;top:0;text-align:center;width:1.5em;-webkit-perspective:1000px;perspective:1000px}.CardBrandIcon{position: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-inner{margin:0;padding:0;position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;width:1.5em}.CardBrandIcon.is-amex .CardBrandIcon-inner{transition:opacity .5s cubic-bezier(.075,.82,.165,1);transition-timing-function:cubic-bezier(.075,.82,.165,1)}.CardBrandIcon-inner--front{z-index:2;-webkit-transform:rotateY(0);transform:rotateY(0)}.CardBrandIcon-inner--back{z-index:1;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.CardBrandIcon img,.CardBrandIcon svg{position: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 svg{transition: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--back{opacity:0;-webkit-transform:rotateY(0);transform:rotateY(0)}.CardBrandIcon.is-amex.is-cvc .CardBrandIcon-inner--back{opacity: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--back{opacity:0}.CardField .CardBrandIcon-container{z-index:2}.CardField:hover{cursor:text}.CardField--unacceleratedTranslate .CardField-child{transition:right .4s cubic-bezier(.25,.46,.45,.94)}.CardField-input-wrapper{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden}.CardField-input-wrapper.is-ready-to-slide{transition:.4s cubic-bezier(.25,.46,.45,.94);transition-property:left,right}.CardField--ltr .CardBrandIcon-container:not(.is-hidden)+.CardField-input-wrapper{left:2em}.CardField--rtl .CardBrandIcon-container:not(.is-hidden)+.CardField-input-wrapper{right:2em}.CardField--ltr .CardBrandIcon-container{left:0}.CardField--rtl .CardBrandIcon-container{right:0}.CardField-number-fakeNumber{position:absolute;pointer-events:none}.CardField-number-fakeNumber-last4{position:absolute;top:0}.CardField--ltr .CardField-number-fakeNumber-last4{right:0}.CardField--rtl .CardField-number-fakeNumber-last4{left:0}.CardField-number-fakeNumber-number{opacity:0}.CardField-number .CardField-number-fakeNumber,.CardField-number input,.CardField-number input:-webkit-autofill{transition: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 input{opacity: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--ie{opacity:0}.CardField-number.is-hidden .CardField-number-fakeNumber{opacity:1}.CardField-number.is-hidden input[name=cardnumber]{opacity:0}.CardField input::-ms-clear{display:none}.CardField-child{z-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>

Answer 1

您可以使用浏览器的Web检查器查找以下CSS：

.ElementsApp, .ElementsApp .InputElement {
    color: #31325F;
    font-size: 15px;
}

将颜色设置为例如#fff将输入文字设为白色。

无法识别商业信用卡表单的文本输入CSS选择器

1 个答案: