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

    Make Form Tab Widgets rounded corner and change font color

    Asked by PoppiesBlooming on August 31, 2014 at 02:05 PM
    can you tell me how to make them rounded and the yellow colour from the font? (#ffcc00) even just the colour would be fine if not rounded.
    css round tabs widget rounded corner
  • Profile Image
    JotForm Support

    Answered by jonathan on August 31, 2014 at 07:16 PM

    Hi,

    Please try using this CSS code in the Form Tabs widget custom CSS option

     

    .tabs-list li{background-color: #ffcc00 !important;

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 4px;

    width: 100px;

     

    }

    .tabs-list .current{background-color: #0066cc !important;

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 4px;

    width: 100px;

    }

     

     

    I tried this on a test form here http://www.jotform.me/form/42427046672455 and seems to work.

     

    Hope this help. Inform us if you need further assistance.

    Thanks!

  • Profile Image

    Answered by PoppiesBlooming on August 31, 2014 at 07:36 PM

    is there a way to get the grey triangles to go too? This is brilliant though thank you!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 01, 2014 at 12:35 AM

    Hello PoppiesBlooming,

    Please add the following custom css code in your widget to hide the grey triangles:

    .tabs-list li:before {

    border-left: none !important;

    }

    .tabs-list li:after {

    border-right: none !important;

    }

    It should give you the following results:

    Please take a look at the following cloned form and see if this looks acceptable:  http://form.jotformpro.com/form/42430309478960? 

    Hope this helps.

    Do get back to us if you need any other changes.

    Thank you!