我不是一个Maven，在Angular ，引导，或条纹，但我只是阅读文件。
首先，为了使引导浮动标签工作，它要求<input>和<label>是兄弟，因为浮动标签将工作，因为:placeholder-shown伪元素。这里的问题是，你的挂载条带元素不是一个输入，他们成为一个输入 Package iframe，所以引导浮动标签不会工作，没有一些调整。
其次，您提到了stripe API文档，其中说明我们可以使用{ labels: 'floating' }，但在尝试之后，发现它仅适用于作为 Package 载的元素（不确定它的名称），其中一个元素是address，它之所以有效，是因为标签位于iframe内部（我在下面的Stackblitz链接上附上了证明）。然后，为了在挂载的元素上使用标签，我们必须使用this method。不幸的是，该方法没有将标签注入到iframe内部，它仍然在外部。因此外观API中的浮动标签无法工作。
尽管在iframe内部，但幸运的是，输入仍然可以在iframe外部更改类（它可以给予StripeElement--focus、StripeElement--complete和StripeElement--invalid），因此我们可以模仿引导浮动标签的行为，并通过复制引导行为将其实现到我们的定制代码中。
我能想到的最简单的解决方案是添加以下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%);
}
...

然后清空占位符（因为我们要使用浮动标签）：

...
      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

我对你的代码做了一点改动，用set input代替了div。你想这么做吗？https://stackblitz.com/edit/angular-kauqxz?file=src%2Ftest%2Fstripe%2Fstripe.component.css,src%2Ftest%2Fstripe%2Fstripe.component.html
它使用名称输入，bc表示名称，您有一个input，而不是div标记

<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>

在这里，您可以看到您尝试使用的样式包括:focus伪类，但它不适用于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-〉它不工作
input:focus-〉它工作正常