Braintree Hosted Fields的CSS

Question

首先，我对CSS / HTML设计并不是那么好，只是基础知识。

我使用的是Braintree托管字段，只是想知道如何使用CSS修复此问题或在html中应用样式？

正如您所看到的，边框宽度太大了。如何让这些变小？

对于我使用的每个输入框：

            <label for="card-number">Card Number</label>
            <div class="hosted-field" id="card-number"></div>

这些字段的CSS看起来像

#card-number {
  border: 1px solid #333;
  -webkit-transition: border-color 160ms;
  transition: border-color 160ms;
}

#card-number.braintree-hosted-fields-focused {
  border-color: #777;
}

这些是来自braintree文档的样式，所以我对它们看起来像上图的原因感到有些困惑。

Answer 1

您需要调整包含托管字段的div的高度。您可以通过在CSS中添加height属性来实现此目的，如下所示：

.hosted-field {
  height: 40px;
}

Answer 2

假设边框来自div本身（您可以使用Chrome Web Developer Tools来确定），您可以使用以下CSS规则。

.hosted-field {
  border-width: 1px;
}

将1px替换为您想要的任何测量值。