Centering the single file upload field button

  • printmymagnet
    Asked on December 6, 2017 at 1:03 AM

    How do I center the "choose file" upload button here?

    https://www.jotform.com/build/73258991513868

  • Elton Support Team Lead
    Replied on December 6, 2017 at 2:51 AM

    It is too complex to customize the native file upload field since every browser has different file upload styles. Example on Firefox, it has a different button size and a text.

    Centering the single file upload field button Image 1 Screenshot 30

    I suggest to turn on the multiple files option so you can customize the button further like aligning it in the middle. Here's how to enable multiple files option.

    Centering the single file upload field button Image 2 Screenshot 41


  • printmymagnet
    Replied on December 6, 2017 at 4:58 PM

    Thanks for the option. I just tried it and it's not ideal in terms of user-experience and functionality (I don't want to receive multiple photos each time).


    As all users will be on mobile, is there a way to customise it for the most popular phones/browsers? eg only for Safari and Chrome?

  • Elton Support Team Lead
    Replied on December 6, 2017 at 6:17 PM

    Even latest browsers don't have the capability to do so. The native file upload style is browser inherent. There is a workaround but there are so many downsides like the file can't be seen in the upload field after you browsed it from your computer. If you like, inject this CSS codes to your form https://www.pastiebin.com/view/5a287a161b62e

    Centering the single file upload field button Image 1 Screenshot 30

    By the way, the multiple file upload has limits. You can limit it to 1 file if you want. 

    Centering the single file upload field button Image 2 Screenshot 41