Advanced Designer: Change button style of "file upload" button?

  • JKulp42757
    Asked on July 27, 2017 at 8:01 PM

    Right now the "file upload" button and the submit button at bottom have the same style..I'd like to change this.

    I tried using the preset button style options, but nothing other than the border really changed. How can I change the color, font, etc... of ONLY the file upload button?

    My form is here: https://form.jotformpro.com/72076115984966


    Thanks!

  • Mike_G JotForm Support
    Replied on July 27, 2017 at 11:21 PM

    If you only want to style the File Upload button, you can use CSS codes — How-to-Inject-Custom-CSS-Codes

    .qq-upload-button {

        font-size: 30px;

        color: yellow !important;

        background: purple !important;

        font-family: "Comic Sans MS", cursive, sans-serif !important;

    }

    Advanced Designer: Change button style of file upload button? Image 1 Screenshot 20

    I hope this helps. If you have other questions, please feel free to contact us again anytime.

  • mchardy418
    Replied on July 28, 2017 at 3:41 PM

    I have tried this one and it seems to work perfectly in the advanced designer part, but when I go back to "Form Builder", it doesn't show in the form nor in the Designer CSS...

    Advanced Design CSS TAB:

    Advanced Designer: Change button style of file upload button? Image 1 Screenshot 30

    Form Builder Design CSS TAB:

    Advanced Designer: Change button style of file upload button? Image 2 Screenshot 41

  • Chriistian Jotform Support
    Replied on July 28, 2017 at 5:15 PM

    I was not able to find the CSS provided by my colleague in the form you have provided.

    Advanced Designer: Change button style of file upload button? Image 1 Screenshot 40

     

    Have you already applied it? If not yet, please see steps below.

    Advanced Designer: Change button style of file upload button? Image 2 Screenshot 51

    Advanced Designer: Change button style of file upload button? Image 3 Screenshot 62

     

    Make sure to click Save after your changes.