Custom CSS: How can I change the Braintree integration Payment Amount field?

  • Profile Image
    Asked on February 03, 2021 at 02:03 PM

    Can you please provide the CSS code and integration instruction so that I can increase the size of the Amount Section of the Braintree Widget.

  • Profile Image
    Answered on February 03, 2021 at 06:16 PM


    Thank you for contacting us.

    Do you want to make the input field longer, or do you want to increase the size of the whole payment amount part?
    Please try the following CSS to see if it is what you were looking for:

    #input_70_donation {
      width: 200px !important;
      margin-top: 20px;
      margin-bottom: 20px;
      margin-right: 5px;

    You can add this code to your form's Custom CSS field in the form builder. For detailed steps, please refer to our guide: How-to-inject-custom-css-codes

    With the above code, the field will look something like the image below.
    You can freely adjust the numbers on the code to your liking. The width will adjust the input field width, and the margins will add empty space around the field.
    If this would not be what you were looking for, please let us know and we are happy to help you further.

    Best Regards,