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

    Can I change the form collapse bar arrow color?

    Asked by facilityops on January 23, 2014 at 04:36 PM

    Is it possible to change the color of the arrow on the form collapse bar without changing the arrow image file?

    I got this far: .form-collapse-right-hide but don't know what to do next or if it's even possible.

    arrow collapse bar next image file
  • Profile Image
    JotForm Support

    Answered by TitusN on January 23, 2014 at 05:28 PM

    Hello,

    Thank you for contacting us.

    Unfortunately, you must change the image to alter its color, you could download both of them and change them by applying the CSS rules to change them:

    Here are the image URL's:

    1. http://cdn.jotfor.ms/images/arrow-closed.png

    2. http://cdn.jotfor.ms/images/arrow-open.png

    You can download them and change thier color using an Image manipulator like photoshop.

    To apply them to your form, upload the images Here and use the upload URL's in the following Rules:

    .form-collapse-right-hide {
    background: url(the new URL for closed arrow) no-repeat center;
    }

    .form-collapse-right-show {
    background: url(the new URL for open arrow) no-repeat center;
    }

    Alternatively, you can use CSS rules to create arrows, for instance, if you paste all the following CSS into your form, you shoudl get some arrows, but they are a little crude:


    .form-collapse-right-hide {
    background: none;
    }

    .form-collapse-right-hide {
    background: none;
    }

    .form-collapse-right.form-collapse-right-hide {
    width: 0;
    height: 0;
    border-bottom: 30px solid transparent;
    border-top: 30px solid transparent;
    border-right: 30px solid #2f2f2f;
    font-size: 0;
    line-height: 0;
    }

    .form-collapse-right.form-collapse-right-hide {
    width: 0;
    height: 0;
    border-bottom: 30px solid transparent;
    border-top: 30px solid transparent;
    border-right: 30px solid #2f2f2f;
    font-size: 0;
    line-height: 0;
    }

    You can change the arrow color (highlighted yellow) to whatever value you like.

    Please let us know if this helps.