How to set a Stripes element CSS to match a bootstrap form-control input CSS properties for size, vertical alignment, focus, etc

Question

I have this form here for a credit card. I'm using Stripe's elements to create the card number input field. Just above the card number I have a name field, which vertically centers the name and placeholder, with a size, height, vertical alignment, etc.

QUESTION - What CSS properties can I use to set the Stripe card number, expiration and cvc field and placeholder field to be the same (vertical alignment) as the bootstrap input field? Specifically, how can I align the placeholder and text inside the element to a vertical center (like the bootstrap element)?

FYI - See how it's lower in the element than the bootstrap placeholder!

I can set CSS properties for the element like this below, but don't know which properties to use?

 var style = { base: { // iconColor: '#666EE8', // color: '#31325F', // lineHeight: '40px', // fontWeight: 300, // fontFamily: 'Helvetica Neue', // fontSize: '15px', '::placeholder': { // color: '#CFD7E0', // fontSize: '1rem', // fontWeight: '400', // lineHeight: '1.5' }, }, }; this.cardNumber = elements.create('cardNumber', { style: style }); this.cardNumber.mount(this.cardNumberElement.nativeElement);

 <div class="mt-4" [formGroup]="paymentForm"> <div class="row"> <div class="form-group col-12"> <label class="control-label">Name on card</label> <input placeholder="ex. John Smith" class="form-control" name="nameOnCard" formControlName="nameOnCard"> </div> <div class="form-group col-6"> <label class="control-label">Card Number</label> <div #cardNumber id="cardNumber" class="form-control py-3"></div> </div> <div class="form-group col-3"> <label class="control-label">Expiration</label> <div #cardExpiry class="form-control py-3"></div> </div> <div class="form-group col-3"> <label class="control-label">Cvc</label> <div #cardCvc class="form-control py-3"></div> </div> </div> </div>

If I remove the py-3 from the element class then it looks like this where the placeholder is too high AND nothing gets typed into the element box when I give it focus and press a key. I'm getting the

Answer 1

Update
As stripe creates elements dynamically, you have to adjust its height and padding. ( Found the answer here )

  <div class="form-group">
    <label for="card-element">Credit or debit card</label>
    <div id="card-element" class="form-control" style='height: 2.4em; padding-top: .7em;'>
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>

Original

Removing py-3 (padding) from the placeholder div does the trick.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/> <div class="mt-4" [formGroup]="paymentForm"> <div class="row"> <div class="form-group col-12"> <label class="control-label">Name on card</label> <input placeholder="ex. John Smith" class="form-control" name="nameOnCard" formControlName="nameOnCard"> </div> <div class="form-group col-6"> <label class="control-label">Card Number</label> <div #cardNumber id="cardNumber" class="form-control">1234 1234 1234 1234</div> </div> <div class="form-group col-3"> <label class="control-label">Expiration</label> <div #cardExpiry class="form-control">MM/YY</div> </div> <div class="form-group col-3"> <label class="control-label">Cvc</label> <div #cardCvc class="form-control">CVC</div> </div> </div> </div>