Stripe payment select styling - css

Question

I'm trying to style the stripe dropdown select to match bootstrap's select. here is my 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>
in my js file i have this
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" is there the dropdown select is. Anyone know how to do this? or that I'm missing. Thank you

Answer 1

Great question, but unfortunately you're limited to the style options listed here:
https://stripe.com/docs/js/appendix/style
This means that you won't be able to set: border-color, transition, border-color, or outline on the element itself. You can apply a border & animations to the container div, but you won't be able to set up the animation transition on anything inside the Element.