如何设计条纹信用卡字段？

Question

我一直在使用这个 html coden bootstrap 4 来集成 stripe。

<div class="form-control" id="card-element"></div>

这给了我以下输出

但是，我想要这样的设计：

JavaScript部分和往常一样：

<script src="https://js.stripe.com/v3/"></script>

<script>
.......
.......
      stripe = Stripe(publishableKey);
      var elements = stripe.elements();
      var style = {
        base: {
          color: "#32325d",
          fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
          fontSmoothing: "antialiased",
          fontSize: "16px",
          "::placeholder": {
            color: "#aab7c4"
          }
        },
        invalid: {
          color: "#fa755a",
          iconColor: "#fa755a"
        }
      };
      var card = elements.create("card", {hidePostalCode: true, style: style });
      card.mount("#card-element");
.......
.......
</script>

我怎样才能得到每个字段分开的第二个设计？