CSS 用于 Braintree 托管字段

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 本身（您可以使用 Chrome Web 开发人员工具来确定这一点），您可以使用以下 CSS 规则。

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

用您想要的任何尺寸替换 1px。

Answer 2

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

.hosted-field {
  height: 40px;
}

CSS 用于 Braintree 托管字段

CSS for Braintree Hosted Fields

html

css

border

braintree