How to style Stripe.js custom element like my other bootstrap floating label elements

I'd like to style my Stripe.js elements (card number, Cvc, Expiry) with floating labels, to be consistent with my other bootstrap floating labels I'm using ngx-stripe as a wrapper around Stripe.js. I've been able to make them look similar to my other bootstrap elements, but they don't float when focus is given. Stackblitz here.

Stripe has some info on floating label appearances here, but after attempting different things, nothing changed! So I might not be using it correctly or my bootstrap classes might be interfering with the Stripe CSS?

1. https://stripe.com/docs/elements/appearance-api?platform=web#form-inputs---floating-labels
2. https://stripe.com/docs/elements/appearance-api?platform=web#others

Here is what my card number element looks like using bootstrap's floating classes:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<div class="form-floating mb-3">
  <div id="floatingNumber" class="form-control stripe-form-control" placeholder="ex. 1111 1111 1111 1111"></div>
  <label for="floatingNumber">Card Number</label>
</div>

<!-- end snippet -->

Image from my Stackblitz

You can see the positions of the label and text are fixed, they don't float.

Here is my Stackblitz that has it set up.
Here is what I tried.

1. Added bootstrap floating classes
2. When creating the Stripe elements I added appearance: { labels: 'floating' } in the appearance
3. Added "stripe-form-control" as a class - found somewhere on Stripe website

I'm not an expert in angular, bootstrap, or stripejs, but I just read the documentations.

Firstly, in order for bootstrap floating labels to work, it requires the <input> and <label> to be siblings, because the floating label will work because of :placeholder-shown pseudo element. The problem here is that your mounted stripe elements aren't an input, they became an input wrapped by an iframe, so bootstrap floating labels won't work without some tweak.

Secondly, you mentioned the stripe API documentation that says that we can use { labels: 'floating' }, and after trying this, it turns out that it only works for elements that are mounted as a pack (not sure what it's called), one of that elements is address, and it works because the label is inside the iframe (I attach the proof on the Stackblitz link down below). And then, in order to use a label on a mounted element, we must use this method. Unfortunately, that method didn't make the label injected inside the iframe, it's still outside, so the floating labels from the appearance API won't work.

Despite being inside the iframe, thankfully, the inputs can still change the class outside the iframe (it could give StripeElement--focus, StripeElement--complete, and StripeElement--invalid), so we could just imitate the behavior of the bootstrap floating labels and implement it to our custom code, by copying the bootstrap behavior.

The easiest solution I could think of is by adding this CSS:

...
/* reset the original behavior of the floating labels for #custom-inputs */
#custom-inputs .form-floating > .form-control:focus ~ label,
#custom-inputs .form-floating > .form-control:not(:placeholder-shown) ~ label {
  opacity: 1;
  transform: scale(1) translateY(0) translateX(0);
}

/* mimic the behavior of bootstrap floating labels for #custom-inputs */
#custom-inputs .form-floating > .form-control.StripeElement--focus ~ label,
#custom-inputs .form-floating > .form-control.StripeElement--complete ~ label,
#custom-inputs .form-floating > .form-control.StripeElement--invalid ~ label {
  opacity: 0.8;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

#custom-inputs .StripeElement--focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}
...

And then empty the placeholder (because we want to use the floating labels):

...
      if (!this.cardNumber) {
        this.cardNumber = this.elements.create('cardNumber', {
          ...this.emptyOptions,
          placeholder: '',
        });
        this.cardNumber.mount('#floatingNumber');
      }
      if (!this.cardCvc) {
        this.cardCvc = this.elements.create('cardCvc', {
          ...this.emptyOptions,
          placeholder: '',
        });
        this.cardCvc.mount('#floatingCvc');
      }
      if (!this.cardExpiry) {
        this.cardExpiry = this.elements.create('cardExpiry', {
          ...this.emptyOptions,
          placeholder: '',
        });
        this.cardExpiry.mount('#floatingExpiry');
      }
...

Here is the working altered Stackblitz

I have changed your code a little bit, set input instead div. Are you trying to do that?
https://stackblitz.com/edit/angular-kauqxz?file=src%2Ftest%2Fstripe%2Fstripe.component.css,src%2Ftest%2Fstripe%2Fstripe.component.html

it works with a name input, bc for name you have an input, not a div tag

   <h5>Working Floating name</h5>
   <div class="form-floating mb-3">
      <input type="text" class="form-control" id="floatingInput" formControlName="name" placeholder="Brad Pitt">
      <label for="floatingInput">Name</label>
   </div>

here you can see that this style you are trying to use includes :focus pseudoclass and it doesn't work with div

.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
    opacity: .65;
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
}

div:focus -> it doesn't work

input:focus -> it works