Is there any way to restyle file upload button?

  • Profile Image
    sto_metallik
    Asked on March 23, 2017 at 07:22 AM
  • Profile Image
    SafaaAbdulhadi
    Answered on March 23, 2017 at 09:40 AM

    You can easily customize your button using the designer tool.

    Click on the properties icon (small wheel) next to the button to open the properties sidebar. 

    From the properties menu, you have the option to change the button style, and add photos to your button. 

     

    And you can always add your custom CSS to the form elements to change the style, If you need more information on how to add custom CSS, please refer to this guide. 

    How to Inject Custom CSS Codes

     

     

  • Profile Image
    sto_metallik
    Answered on March 23, 2017 at 10:29 AM

    I tried this, but it doesn't work for default upload button that was shown at screenshot above ((

  • Profile Image
    Jan
    Answered on March 23, 2017 at 01:39 PM

    You need to enable the "Allow Multiple" option in order to customize the File Upload field using custom CSS. Select the file upload field and then click the "properties" button. Go to "Multiple" tab and then turn on the "Multiple Files" option.

    After that, please insert this custom CSS code:

    .qq-upload-button {
    background: -moz-linear-gradient(top, #069e71 0%, #004f36 100%) !important;
    background: linear-gradient(top, #069e71 0%, #004f36 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#069e71), color-stop(100%,#004f36)) !important;
    border: 0px solid #333333 !important;
    font-size: 14px !important;
    text-shadow: none !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    letter-spacing: 1px !important;
    height: 20px !important;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:

    Hope that helps. Thank you.

  • Profile Image
    sto_metallik
    Answered on March 23, 2017 at 02:58 PM

    Thanks for your advice! But I can't set width of the button the same as button under. What property can make upload button to be the same width as submit button?

  • Profile Image
    sto_metallik
    Answered on March 23, 2017 at 03:50 PM

    JotForm advanced designer is pretty buggy I can say (( I applyed your style but the result is always the same:

    http://prntscr.com/ennbzd

    White button with 1 px black border. That's all ((

     

  • Profile Image
    Jan
    Answered on March 23, 2017 at 05:35 PM

    I checked your form and I can see that you injected different kinds of CSS from the one I provided.

    Please check this demo form: https://form.jotformpro.com/70815739939977. You can clone it if you like to. Here's a guide: How-to-Clone-an-Existing-Form-from-a-URL.

    I have added width: 272px !important; in the CSS code. Here's the update CSS:

    .qq-upload-button {
    background: -moz-linear-gradient(top, #069e71 0%, #004f36 100%) !important;
    background: linear-gradient(top, #069e71 0%, #004f36 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#069e71), color-stop(100%,#004f36)) !important;
    border: 0px solid #333333 !important;
    font-size: 14px !important;
    text-shadow: none !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    letter-spacing: 1px !important;
    height: 20px !important;
    width: 272px !important;
    }

    Hope that helps. Thank you.

  • Profile Image
    sto_metallik
    Answered on March 23, 2017 at 06:04 PM

    Yes, you're right )) Now button is dark green. You set fixed width. It's bad because of now this button is not responsive (( Here is the link to my website:

    xn---23-eddqjpfxgefce1a0be.xn--p1ai

    Just paste this part of symbols to your browser ))

    And I can't adjust the vertical alignment of the button text using padding ((

  • Profile Image
    Chriistian
    Answered on March 24, 2017 at 01:20 AM

    I'm currently checking your form. Please allow me some time to further investigate. I'll get back once I've found results.

    Regards.

  • Profile Image
    Chriistian
    Answered on March 24, 2017 at 01:36 AM

    Hi again,

    Please replace the width to 100% and remove the left and right padding, so the CSS code should be:

     

    .qq-upload-button {

        background : -moz-linear-gradient(top, #069e71 0%, #004f36 100%) !important;

        background : linear-gradient(top, #069e71 0%, #004f36 100%) !important;

        background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#069e71), color-stop(100%,#004f36)) !important;

        border : 0px solid #333333 !important;

        font-size : 14px !important;

        text-shadow : none !important;

        color : #ffffff !important;

        border-radius : 0 !important;

        -moz-border-radius : 0 !important;

        -webkit-border-radius : 0 !important;

        letter-spacing : 1px !important;

        height : 20px !important;

        width: 100% !important;

        padding-left: 0px !important;

        padding-right: 0px !important;

    }

     

     

    Then please also add this CSS code:

     

    .qq-uploader{

    width: 100% !important;

    }

     

     

    Here's the result:

     

    Let us know if you need further assistance.

    Regards.

  • Profile Image
    sto_metallik
    Answered on March 24, 2017 at 05:23 AM

    Ok, width is fine )) And what about vertical alignment of the button text?

    screenshot

  • Profile Image
    Nik_C
    Answered on March 24, 2017 at 07:21 AM

    On which device and browser are you testing your form? Since I wasn't able to replicate this problem on my desktop and in iPhone emulator:

    Desktio:

    And phone:

    We'll wait for your response.

    Thank you!

  • Profile Image
    sto_metallik
    Answered on March 24, 2017 at 07:23 AM

    I've made screenshot of the button at Mozilla Firefox, MacBook Pro, OS X Captain.

  • Profile Image
    Chriistian
    Answered on March 24, 2017 at 09:35 AM

    If you want to adjust the padding of the text of the upload field, you can use this sample custom CSS code.

    .qq-upload-button {

        padding-top: 30px !important;

        padding-bottom: 30px !important;

    }

    Please do not forget to add the !important tag so the padding will be implemented on the field.

     

  • Profile Image
    sto_metallik
    Answered on March 24, 2017 at 12:39 PM

    Thank you! It seems not to be good that Mozilla Firefox displays button text alignment differently. It's Ok in Safari, Chrome.

  • Profile Image
    Jan
    Answered on March 24, 2017 at 02:35 PM

    There are times that we need to use custom CSS to fix a browser compatibility issue. Anyhow, glad to hear that your issue is now resolved.

    If you need further assistance, please let us know. Thank you.