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.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    how can i change the background color of the upload file button

    Asked by Suhni California on January 05, 2012 at 01:12 PM

    how can i change the background color of the upload file button

     

    it now is orange - i would like it to be black

  • Profile Image

    Answered by paoloumali on January 05, 2012 at 04:22 PM

    You can easily do that through injecting CSS.

    Please take a look at this guide on how to go about these customizations.

    http://www.jotform.com/help/75-Customize-your-Form-using-Custom-CSS-Codes

    If you were specific about the Multi-upload button, the built-in css declarations are shown below.

     

    .qq-upload-button {

    background: #FFA84C;

    background: -moz-linear-gradient(top, #FBCB5D 0%, #EFA003 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBCB5D), color-stop(100%,#EFA003));

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBCB5D', endColorstr='#EFA003',GradientType=0 );

    color: white;

    display: block;

    font-size: 16px;

    padding: 8px 0;

    text-align: center;

    text-shadow: 0 -1px #C64F00;

    border: 1px solid #C64F00;

    -moz-border-radius: 5px 5px;

    -webkit-border-radius: 5px 5px;

    border-radius: 5px 5px;

    border-image: initial;

    }

    You can override any statement by redeclaring it when you inject your CSS like below:

     

    .qq-upload-button {

    background: black !important;

    }

    or

    .qq-upload-button {

    background: #000 !important;

    }

  • Profile Image

    Answered by paoloumali on January 05, 2012 at 04:28 PM

    Please try these, but once you get the pattern on how it's done, you can customize it the way you wanted.

     

     

    .qq-upload-button {
    background: #000 !important;
    background: -moz-linear-gradient(top, #000000 0%, #666666 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#666666)) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBCB5D', endColorstr='#EFA003',GradientType=0 );
    color: white;
    text-shadow: 0 -1px #ccc;
    border: 1px solid #ccc;
    }
    Note the following colors: #000000, #666666
    They are responsible for the shades/gradients. In your Photoshop or any image editor,
    choose two colors relatively near each other to create the same effect.