Style of File Upload button changes when enabling Allow Multiple option

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?

before and after the allow multiple file uploads

does that automatically.. (??)

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

When using the Allow Multiple option on a file upload button, the button will start following the same styling as the Submit button of your form. This is because a traditional (HTML) button for uploading files uses styling from your browser, and can only accept a single file to be uploaded.

In order to allow multiple files to be uploaded, we have implemented our own mechanism which is not a traditional (HTML) file upload, and can therefore accept multiple files. Our custom implementation also follows the styling for the Submit and Print buttons of your form, which is why the button will appear to "swell" when using Allow Multiple option.

Is there a specific styling you wanted to apply to the file upload field when it is in Allow Multiple mode?

yes like the basic one showed in this picture.

Please use this custom CSS code: 

.qq-upload-button {
padding: 2px 6px !important;
border : 1px solid #ccc  !important;
color : #666  !important;
text-shadow : 0 1px #fff  !important;
cursor : pointer  !important;
-moz-border-radius : 3px 3px  !important;
-webkit-border-radius : 3px 3px  !important;
border-radius : 3px 3px  !important;
-moz-box-shadow : 0 1px #fff inset, 0 1px #ddd  !important;
-webkit-box-shadow : 0 1px #fff inset, 0 1px #ddd  !important;
box-shadow : 0 1px #fff inset, 0 1px #ddd  !important;
background : #f5f5f5  !important;
background : -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%) !important;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)) !important;
background : -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%) !important;
background : -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%) !important;
background : -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%) !important;
background : linear-gradient(top, #f5f5f5 0%,#eeeeee 100%) !important;
filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ) !important;
}

Here's a guide on how to inject custom CSS on the form. The upload button for allow multiple option should look like this:

Hope that helps. Thank you.

Ok it changed somewhat but I want it to look just like the original button in pic 2. Also the bottom button is still not right.

You need to add this CSS declaration inside the .qq-upload-button {...}.

width : 70px !important;
font: 13.3333px Arial !important;

After that, go to the properties of the upload field and change the button text.

Here's the result:

What would you want the bottom upload button to look like?

I want the smooth rounded corners, I want the text and button to be slimmer.

and no matter what code i inject it still shows as the grey boxy upload button in my web browser. Please advise exactly where to inject the code you send.

Is this the form you're referring to? (https://www.jotform.us/form/61433506389156)

Would you like me to log in to your account and insert that CSS code on the form?

please I would rather have the simple instructions so that in the future I will know how to get it done.

Here's how you can make the button of the upload button with "Allow Multiple" option enabled somehow similar with the upload button that can only upload one file at a time.

You need to add the following CSS codes below to your form.

.qq-upload-button {

    background-color: #E4E4E4 !important;

    border-radius: 2px !important;

    width: 86px !important;

    height: 6px !important;

    border-width: 2px;

    border: 1px solid #A2A2A2;

    text-align: center !important;

    background-color: buttonface;

    box-sizing: border-box;

    padding: 2px 5px 17px 7px !important;

    font: 1.09em Arial !important;

    letter-spacing: 0.1px !important;

}

You may also refer to this guide to learn how to inject Custom CSS codes to your form.

How-to-Inject-Custom-CSS-Codes

Also, change the Button Text of the button in its Properties once the "Allow Multiple" option is enabled.

I hope this helps. Let us know if you need any further assistance. Thank you.