Braintree托管领域的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; 
} 

这些都是从布伦特里的文档拍摄风格，所以我作为一个有点困惑为什么他们看起来像上面的图像。

Answer 1

您需要调整包含托管字段的div的高度。你可以通过像这样在你的CSS添加height属性来实现这一点：

.hosted-field { 
    height: 40px; 
} 

Answer 2

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

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

用您希望的任何度量替换1px。