Braintree 托管字段的 CSS答案

【问题标题】：CSS for Braintree Hosted FieldsBraintree 托管字段的 CSS
【发布时间】：2017-06-15 17:13:30
【问题描述】：

首先，我对 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 的文档，所以我有点困惑为什么它们看起来像上图。

【问题讨论】：

标签： html css border braintree

【解决方案1】：

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

.hosted-field {
  height: 40px;
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我已经这样做了，这只是线条的粗细，不是吗？查看我的 CSS 的编辑版本
你指的是盒子的宽度和里面的内容吗？如果是这样，您可以使用 width 或 max-width 之类的属性。