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

    Problems with Form Tab Widget Custom CSS

    Asked by SpiritofGeorgia on December 04, 2015 at 11:24 AM

    For those who are familiar with CSS, can you take a look at the following custom CSS entered in the form tabs widget itself, not the Form Styles inject custom CSS?
    The .current CSS is not working, and the border-bottom: none is not removing the triangles. Hopefully that will fix the main border not displaying correctly.
    Any help is greatly appreciated!

    .tabs-list li{
       font-size: 12px;
       font-weight:
       bold; color:#5805ff !important;
    }
    .tabs-list li{background-color: #bfefff !important;
       border: 2px solid #ff0094;
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       border-radius: 5px;
       padding: 4px;
       width: 100px;
    }
    .tabs-list .current{background-color: #7fdfff !important;
       border: 2px solid #ff0094;
       -webkit-border-radius: 5px;
       -moz-border-radius:5px;
       border-radius: 5px;
       padding: 4px;
       width: 100px;
    }
    .tabs-list li:Before {
       border-bottom: none !important;
    }
    .tabs-list li:after {
       border-bottom: none !important;
    }

    https://form.jotform.com/53374121039954 

    form tab tab widget form tab widget JotForm size font Form Styles
  • Profile Image

    Answered by SpiritofGeorgia on December 04, 2015 at 12:03 PM

    I stumbled onto the following syntax for the triangles on either side. (Capitalization makes a difference too!) 

    .tabs-list li .liBefore {
       border-bottom: none !important;
       }
    .tabs-list li .liAfter {
       border-bottom: none !important;
      }

  • Profile Image

    Answered by SpiritofGeorgia on December 04, 2015 at 12:11 PM

    Current Tab settings and the top border are not working.

    Seems like the basics could be added as settings into the widget...

  • Profile Image

    Answered by SpiritofGeorgia on December 04, 2015 at 12:44 PM

    Finally found a version of CSS that works! Check out http://www.jotform.com/answers/715014-Changing-the-Form-Tabs-color.

    .tabs-list.default li {
    font-size: 12px !important;
    font-weight: bold !important;
    color:#5805ff !important;
    background: #bfefff !important;
    border-top: 2px solid #ff0094 !important;
    border: 2px solid #ff0094 !important;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    border-radius: 5px !important;
    padding: 4px !important;
    width: 100px !important;
    }
    .tabs-list.default li.current {
    font-size: 12px !important;
    font-weight: bold !important;
    color:#5805ff !important;
    background: #7fdfff !important;
    border-top: 2px solid #ff0094 !important;
    border: 2px solid #ff0094 !important;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    border-radius: 5px !important;
    padding: 4px !important;
    width: 100px !important;
    }
    .tabs-list.default .liAfter, .tabs-list.default .liBefore {
    border-bottom: none !important;
    }
    .tabs-list.default li.current .liAfter, .tabs-list.default li.current .liBefore {
    border-bottom: none !important;
    }

  • Profile Image
    JotForm Support

    Answered by Charlie on December 04, 2015 at 01:21 PM

    I'm glad that you already found a working CSS code in one of our threads.

    Should you need further assistance on this, please do not hesitate to contact us again.

    Cheers!