Question

我正在尝试设置条纹下拉菜单的样式以匹配引导程序的选择。这是我的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"在下拉列表中。有人知道怎么做吗？还是我想念的谢谢

Answer 1

很好的问题，但是很遗憾，您只能使用此处列出的样式选项： https://stripe.com/docs/js/appendix/style

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

条纹付款选择样式

1 个答案: