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; 
} 

これらは、ブレインツリーのドキュメントから取られたスタイルですのようなので、私はへと少し混乱しているになります。私が使用した各入力ボックスの

なぜ彼らは上記のイメージのように見えますか？

Answer 1

ホストされているフィールドを含むdivの高さを調整する必要があります。あなたはとてもようなあなたのCSSでheightプロパティを追加することによって、これを達成することができます：

.hosted-field { 
    height: 40px; 
} 

Answer 2

境界線がdiv自体から来ているとします（Chromeウェブ開発ツールを使用してこれを判断できます）。次のCSSルールを使用できます。

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

任意の測定値で1pxを置き換えます。