Problems with Form Tab Widget Custom CSS

  • Profile Image
    SpiritofGeorgia
    Asked 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 

  • Profile Image
    SpiritofGeorgia
    Answered 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
    SpiritofGeorgia
    Answered 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
    SpiritofGeorgia
    Answered 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
    Charlie
    Answered 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!