title: CSS for Braintree Hosted Fields
body: <p>First off, I'm not that great with CSS/HTML design stuff, just the basics.</p>
  
  <p>I'm using Braintree hosted fields, just wondering how to fix this using CSS or applying style's in html?</p>
  
  <p><a href="https://i.stack.imgur.com/KSS7x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KSS7x.png" alt="enter image description here"></a></p>
  
  <p>As you can see the border widths are far too big. How do I make these smaller?</p>
  
  <p>For each input box i've used:</p>
  
  <pre><code>            &lt;label for="card-number"&gt;Card Number&lt;/label&gt;
              &lt;div class="hosted-field" id="card-number"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>my CSS for the fields looks like</p>
  
  <pre><code>#card-number {
    border: 1px solid #333;
    -webkit-transition: border-color 160ms;
    transition: border-color 160ms;
  }
  
  #card-number.braintree-hosted-fields-focused {
    border-color: #777;
  }
  </code></pre>
  
  <p>These are styles taken from braintree's documentation so I'm a little confused as to why they look like the image above.</p>