How to adjust File upload button with CSS?

  • rodneywise
    Asked on April 22, 2016 at 3:29 PM
  • Kiran Support Team Lead
    Replied on April 22, 2016 at 5:34 PM

    I've checked your JotForm and see that the Upload button is also displayed as the Submit button.

    How to adjust File upload button with CSS? Image 1 Screenshot 20

    It seems that you have already fixed the issue. If you are referring to something different or need any further assistance, please let us know. We will be happy to help! 

    Thank you! 

  • d_lane
    Replied on May 28, 2016 at 10:41 AM

    i'm having trouble changing the look and feel of the upload files button. Any help would be welcomed.

  • liyam
    Replied on May 28, 2016 at 11:05 AM

    Hello d_lane,

    Can you please tell exactly what you are trying to accomplish? This way, we'll be able to provide more explicit information to achieve your purpose.

    We'll be looking forward to your response.

    Thanks.

  • d_lane
    Replied on May 28, 2016 at 11:15 AM

    I want to enable my visitors to upload a few photos. I have the upload file button on my page but it boxy and I want to change the look to match my color scheme.

  • Nik_C
    Replied on May 28, 2016 at 11:46 AM

    I checked your form, and to change the style of the button, you can follow this guide:

    1. Click on Edit properties:

    How to adjust File upload button with CSS? Image 1 Screenshot 50

    2. Change the style as you wish:

    How to adjust File upload button with CSS? Image 2 Screenshot 61

    Another way is to change by using the CSS, and to do that please follow:

    1. Click Settings:

    How to adjust File upload button with CSS? Image 3 Screenshot 72

    2. An in the Custom CSS field you can paste the code:

    How to adjust File upload button with CSS? Image 4 Screenshot 83

    .qq-upload-button.form-submit-button-carbon_rounded {

    background: red!important;

    }

    And just change the color as you wish.

    Please let me know if you have any further questions.

    Thank you!

  • d_lane
    Replied on May 28, 2016 at 3:43 PM

    ok great that solved my issue. My next issue arises when I change the allow multiple files to yes. It makes my button swell to triple the size of the original. Weird. Any help here?
  • Nik_C
    Replied on May 28, 2016 at 5:13 PM

    I'm not sure I understood your question, when I submit multiple files I get this:

    How to adjust File upload button with CSS? Image 1 Screenshot 20

    And as far as I know we can not change that.

    Were you referring to something else?

    If you can provide us with a screenshot it would be very helpful.

    You can also check this Image preview widget, if it will work better for you.

    Thank you!

  • d_lane
    Replied on May 29, 2016 at 1:23 AM

    before and after the allow multiple file uploads

     

    How to adjust File upload button with CSS? Image 1 Screenshot 30How to adjust File upload button with CSS? Image 2 Screenshot 41

  • d_lane
    Replied on May 29, 2016 at 1:27 AM

    does that automatically.. (??)

  • d_lane
    Replied on May 29, 2016 at 1:33 AM

    and then this happens to the upload button when I edit the button in the designer.

    How to adjust File upload button with CSS? Image 1 Screenshot 20

  • Boris
    Replied on May 29, 2016 at 4:03 AM

    @d_lane, it seems you are replying to a support thread opened by a different user, rodneywise. This means that all of our replies are being unnecessarily emailed to our user who originally opened this support thread.

    In order to avoid any confusion, I have moved your last post to a new support thread:

    https://www.jotform.com/answers/849349

    We will be assisting you with styling of your upload field there. Additionally, if you need assistance with something else in the future, please open a new support thread from this page:

    https://www.jotform.com/contact

    Thank you.