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。