Search code examples
htmlcssborderbraintree

CSS for Braintree Hosted Fields

First off, I'm not that great with CSS/HTML design stuff, just the basics.

I'm using Braintree hosted fields, just wondering how to fix this using CSS or applying style's in html?

enter image description here

As you can see the border widths are far too big. How do I make these smaller?

For each input box i've used:

            <label for="card-number">Card Number</label>
            <div class="hosted-field" id="card-number"></div>

my CSS for the fields looks like

#card-number {
  border: 1px solid #333;
  -webkit-transition: border-color 160ms;
  transition: border-color 160ms;
}

#card-number.braintree-hosted-fields-focused {
  border-color: #777;
}

These are styles taken from braintree's documentation so I'm a little confused as to why they look like the image above.

Solution

  • You need to adjust the height of the divs containing your hosted fields. You're able to accomplish this by adding a height property in your CSS like so:

    .hosted-field {
  height: 40px;
}