How To Make Collapse Bars Have Multiple Colors in Hover

  • Profile Image
    wemakeprints
    Asked on January 21, 2015 at 04:31 AM

    Would you give me an example of how I can change the hover color of each of my form collapse bars? Thanks guys.

  • Profile Image
    Charlie
    Answered on January 21, 2015 at 09:12 AM

    Hi,

    Upon checking your form, it seems that you have already applied the CSS code for changing color in your collapse bars by hover?

    If you haven't found it yet, here's a quick guide.

    1. Navigate to your Form's "Designer"

    2. Inside the Form Designer, navigate to the CSS tab and find this CSS code.

    .form-collapse-table:hover {

        box-shadow : none;

        text-shadow : none;

        background : red; Change the color based from your own preferences 

    }

     

     

    3. Here's my demo cloned form: http://www.jotform.com/form/50203955977968

     

    I hope this helps. Let us know if you need more assistance on this.

    Thank you.

     

     

  • Profile Image
    Charlie
    Answered on January 21, 2015 at 09:25 AM

    Hi,

    I missed the part where you want to change the hover color of each of your form collapse bars. Here's the CSS code for that:

    .form-collapse-table#collapse_4:hover {

        background: red;

        box-shadow : none;

        text-shadow : none;

    }

    .form-collapse-table#collapse_10:hover {

        background: blue;

        box-shadow : none;

        text-shadow : none;

    }

    .form-collapse-table#collapse_14:hover {

        background: yellow;

        box-shadow : none;

        text-shadow : none; 

    }

    .form-collapse-table#collapse_18:hover {

        background: green;

        box-shadow : none;

        text-shadow : none; 

    }

    .form-collapse-table#collapse_21:hover {

        background: gray;

        box-shadow : none;

        text-shadow : none; 

    }

    If you want to have multiple colors, you'll need to remove the earlier CSS code related to hover.

    You'll need to remove this one:

    .form-collapse-table:hover {

     

    }

     

    You can clone my form to see further my custom CSS codes there. Here's a guide for that: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Let us know if you need more assistance on this.

    Thank you.

  • Profile Image
    wemakeprints
    Answered on January 22, 2015 at 11:37 PM

    Great as always. Thanks Charlie, I look forward to upgrading my service soon.

  • Profile Image
    Charlie
    Answered on January 23, 2015 at 08:16 AM

    You're welcome and thank you for your continued support and use of JotForm. I'm glad that it works for you. 

    If you need any assistance again or have other concerns, please do not hesitate to open up a new thread here in the forum, we'll be more than happy to help.

    Thank you.