Adjusting the file upload button using CSS

  • Profile Image
    tycoprinting
    Asked on September 27, 2016 at 01:31 PM

    Our form at https://form.jotform.com/62695651899174 is having formatting issues with the File Upload button 

    How do we adjust the text position so it is vertically centered in the button?

    How do we center the button on the page?

    How do we reduce the spacing above the button?

     

    Thank you.

  • Profile Image
    Jan
    Answered on September 27, 2016 at 03:56 PM

    First, there is an error in your CSS code. Please remove the extra curly braces "}".

    How do we adjust the text position so it is vertically centered in the button?

    The CSS code below will increase the top padding of text inside the button.

    .qq-upload-button {
    padding-top: 8px !important;
    }

    How do we center the button on the page?

    You can increase the left margin using this CSS:

    .qq-uploader {
    margin-left: 30% !important;
    }

    How do we reduce the spacing above the button?

    You can use the CSS code below to force the top padding and top margin to have a value of 0px:

    #label_31 {
    display: none !important;
    }

    #id_30 {
    margin-bottom: 0px !important;
    }

    #id_31 {
    margin-top: 0px !important;
    padding-top: 0px !important;
    }

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

     

    Hope that helps. Thank you.