Form Tabs Widget: How to change color of visited tabs

  • NEMSSupervisor
    Asked on March 3, 2019 at 1:40 PM

    I am using the form tabs wiget.  I am being asked if it is possible to have the tabs change colour when the tab has been accessed.  Is there a CSS code that can be written to change the colour of the tab if it has been accessed.  They are black and orange currently and I am willing to accept red and black for changes. 

  • Mike_G JotForm Support
    Replied on March 3, 2019 at 4:23 PM

    The Form Tabs widget has a Theme option where you can select a red and black combination.

    1551648082t16 20 33 Screenshot 10

    With that theme, the color of the tabs will look like this (please see image below).

    1551648116t16 17 44 Screenshot 21

    I hope this helps. If you have other questions or concerns, please do not hesitate to let us know.

  • NEMSSupervisor
    Replied on March 3, 2019 at 6:01 PM

    Yes I selected the black and orange.  What I am asking is if there is a CSS code that can be written to change the color once the tab has been selected so that when you return to the form the tab will be a different color to let you know you have been there. 

  • Mertkan JotForm Developer
    Replied on March 4, 2019 at 2:15 AM

    To my understanding, you would like to change the active tab background color. You should add Custom CSS code in your widget. You should select the widget that you would like to change. Then, you should click on the wand 'widget settings' icon. After that, you should add your CSS Code and make sure the save changes.

     

    1551683188Screen Shot 2019 03 04 at 10 Screenshot 10

     

    Exampe code:

    #tabs-list .current {

        color : #0066cc !important;

        font-weight : bold;

        background : #0099ff !important;

    }

    /* Added code */

    .current div.liBefore {

        border-bottom-color: #0099ff !important;

    }

    .current div.liAfter {

        border-bottom-color: #0099ff !important;

    }

     

    The #0099ff color can be updated.

     

    For detailed information, please check this similar discussion thread: change background-color of Form Tabs.

    Is it similar to what you wanted to do on your form? 

    I hope, this has been helpful.

    Let us know if you need further assistance.

  • NEMSSupervisor
    Replied on March 4, 2019 at 2:05 PM

    This will change the tab once selected but I want the colour to change and remain that colour to let the user know they have already been there.  

  • Mike
    Replied on March 4, 2019 at 3:31 PM

    Unfortunately, this is not currently possible to change the color of visited tabs.

    I am escalating a feature request ticket to our developers on your behalf to see if this is something that can be implemented.

    There is no ETA for when this will be addressed, but we will let you know if we have any updates.