条纹支付选择样式答案

【问题标题】：Stripe payment select styling条纹支付选择样式
【发布时间】：2020-07-10 14:42:05
【问题描述】：

我正在尝试设置条带下拉选择的样式以匹配引导程序的选择。这是我的html

<form id="payment-form">
  <div class="form-row">
    <div>
      <label for="bank-element">
        Bank
      </label>
      <div id="bank-element">
        <!-- A Stripe Element will be inserted here. -->
      </div>
    </div>
  </div>

  <button id="button" data-secret="<?= $intent->client_secret ?>">
    Submit Payment
  </button>

  <!-- Used to display form errors. -->
  <div id="error-message" role="alert"></div>
</form>

在我的 js 文件中我有这个

var style = {
    base: {
        'padding': "10px 12px",
        'color': '#495057',
        'fontFamily': 'apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif',
        'border-color': '#80BDFF',
        'outline':'0',
        'box-shadow': '0 0 0 .2rem rgba(0,123,255,.25)',
        'transition': 'border-color .15s ease-in-out, box-shadow .15s ease-in-out'
      },
      invalid: {
        color: "#fa755a"
      }
};

var Bank = elements.create(
    'Bank',
    {style: style, accountHolderType: 'individual'}
  );

id="bank-element" 有没有下拉选择。有人知道怎么做吗？或者我失踪了。谢谢

【问题讨论】：

标签： css twitter-bootstrap-3 stripe-payments

【解决方案1】：

很好的问题，但不幸的是，您仅限于此处列出的样式选项： https://stripe.com/docs/js/appendix/style

这意味着您将无法在元素本身上设置：border-color、transition、border-color 或 outline。您可以将边框和动画应用到容器 div，但您将无法在 Element 内的任何内容上设置动画过渡。

【讨论】：