Is there a way to change the design of the browse button on the file upload

Is there a way to change the design of the browse button on the file upload option?

You can use the Inject Custom CSS feature to style the multi upload button. Please visit the following article from our user guide for more information on how this can be done:

http://www.jotform.com/help/139-Custom-Colors-for-Multi-upload-Buttons

If you have any questions feel free to contact us.

Cheers!

Hi Mliz,

Thanks for the quick response. I was actually looking to be able to use my own "browse" button image.

Also the custom css only seems to work if I allow multiple uploads.

In short, is there anyway for me to change the default Browse button to my own custom browse button (image)?

Thanks, Rich

Well, it took some digging around the internet but it looks like a couple of the solutions provided in this StackOverflow thread may be useful. I'll see if I can put together a demo form for you and post its link here later.

Incidentally, you're right about the custom CSS in the user guide article only being applicable to multi-upload buttons.

Well, I was able to get this to work somewhat, as illustrated in this demo. The only issue (and it's a pretty significant one) is that the selected file isn't shown! I'll continue tinkering with the injected CSS to see if a solution (short of embedding the form's full source) can be found.

Thanks abajan for your reserach into this issue. I followed the custom CSS you provided a link to from the StackOverflow thread but it is not working on my form.

The browse button is litterally displayed in the section where I inject the CSS but not  on the form. Then when I close the section for injecting the CSS it is gone.

Any suggestions?

Thanks in advance.

Hmm... I'm not sure how that occurred (the browse button being displayed in the injected CSS box) but the following CSS is what was injected into my demo form:

#input_5 {
opacity: 0;
-moz-opacity: 0;
filter: alpha(opacity=0);
}

#id_8 img {
position: absolute;
top: -40px;
left: 5px;
z-index: -10000;
}
.form-description {
top: 30px;
right: 175px;
}

#input_5 selects the input element of the upload field (that includes the default button which varies from browser to browser).

#id_8 img selects the customized image (made at CoolText.com). Of course, you can use your own image. Probably, the best way to have images shown on forms is to upload them via an upload field of one of your own JotForm forms, copy the image's URL from that form's submissions page and paste it into the Enter URL box of the image wizard. That way, you can get the image displayed on both the non-secure and secure versions of the form by simply appending an "s" to the http of the image's URL. (See Adding a Secure URL and Image)

The .form-description rule repositions the upload field's hover text. If you intend to use a hover text box for your form's upload field and other hover texts exist within the form, the rule will need to be more specific. Otherwise all of the hover texts will be repositioned. (The three presentations on this page will help to clarify why that would happen.)

Feel free to clone my form and experiment with it's injected CSS.

Lastly, viewing the form's source will help to determine the correct elements to be targeted but a tool like Firebug simplifies such tasks.

good