如何设置 Stripes 元素 CSS 以匹配 bootstrap 表单控件输入 CSS 大小、垂直对齐、焦点等属性

Question

我这里有这张信用卡表格。我正在使用 Stripe 的元素来创建卡号输入字段。在卡号上方我有一个名称字段，它垂直居中名称和占位符，具有大小、高度、垂直对齐方式等。

问题 - 我可以使用什么 CSS 属性来将 Stripe 卡号、有效期和 cvc 字段以及占位符字段设置为与bootstrap 输入字段？具体来说，如何将元素内的占位符和文本对齐到垂直中心（如 bootstrap 元素）？

仅供参考 - 看看它在元素中的位置低于 bootstrap 占位符！

我可以像下面这样为元素设置 CSS 属性，但不知道要使用哪些属性？

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>

如果我从元素 class 中删除 py-3，那么它看起来像这样，其中占位符太高，当我给它焦点并按下一个键时，没有任何内容被输入到元素框中。我得到了

Answer 1

更新
由于 stripe 动态创建元素，您必须调整其高度和填充。 (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>

原创

从占位符 div 中删除 py-3（填充）就可以了。

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

如何设置 Stripes 元素 CSS 以匹配 bootstrap 表单控件输入 CSS 大小、垂直对齐、焦点等属性

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

html

javascript

css

twitter-bootstrap

stripe-payments