What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

  • Profile Image

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

    Asked by Rich on February 04, 2012 at 06:50 PM

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



    This is a re-post of a comment on Submit Button CSS & CSS3

    browse image upload css
  • Profile Image
    JotForm Support

    Answered by mliz on February 04, 2012 at 08:22 PM

    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!

  • Profile Image

    Answered by Rich on February 04, 2012 at 11:29 PM

    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

  • Profile Image
    JotForm Support

    Answered by abajan on February 05, 2012 at 06:29 AM

    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.

  • Profile Image
    JotForm Support

    Answered by abajan on February 05, 2012 at 06:31 AM

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

  • Profile Image
    JotForm Support

    Answered by abajan on February 05, 2012 at 09:36 AM

    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.

  • Profile Image

    Answered by Rich on February 05, 2012 at 10:06 AM

    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.

  • Profile Image
    JotForm Support

    Answered by abajan on February 05, 2012 at 11:14 AM

    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.

  • Profile Image

    Answered by kamal on June 14, 2012 at 03:43 AM

    good