How to edit the Style of the Submit and Browse Files buttons

  • Profile Image
    NBeson
    Asked on July 06, 2021 at 12:47 PM

    I just added a file upload button, and for some reason the height of it increases when I preview the page. Is there a work around for that?


    Then is there a way to change the color of the theme of the submit button?

    1625585862_60e478c618737_?md5=qULlzFcZ5n

  • Profile Image
    Richie_P
    Answered on July 06, 2021 at 01:08 PM

    It seems you're still referring to your form https://form.jotform.com/211824797797172.

    You may add this custom CSS to change the height of your upload button.

    .qq-upload-button {
       height: 20px !important;
    }


    You may update your submit button style in your form designer>Styles

    firefox_sOluZVrl2M.png

    Please check it out and let us know how it goes.

  • Profile Image
    NBeson
    Answered on July 06, 2021 at 01:11 PM

    Thanks that worked for the size!

    I was more so curious if it's possible to adjust the color of a button style. Or to change the button color to a custom HEX value.

  • Profile Image
    taylor
    Answered on July 06, 2021 at 05:03 PM

    Hello! 👋

    You can change the color of buttons on your form by injecting custom CSS into your form. We have a guide on how to do that here. For example, if you wanted to change the button color of the Browse Files button to a white background with black text, you would add the following CSS.

    1625605178_60e4c43aaef37_

    .qq-upload-button {
        height : 20px !important;
        color: #000; /* Change to desired HEX color, button text */
        background: #fff; /* Change to desired HEX color, button background */
    }

    You can do this with any button on your form. We have a guide here on how to change the styling of the Submit button as well.

    If you have any other questions or need help with anything else, please let us know!

    Thanks!