Is there any way to restyle file upload button?

Now I have a standart style:

http://prntscr.com/engphh

Can I design it like here:

http://prntscr.com/engps2

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

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

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.

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?

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 ((

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.

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 ((

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

Regards.

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.

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

screenshot

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!

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

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.

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

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.