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

    Is it possible to display the scrollbar in a different style?

    Asked by milladesignmaccom on May 01, 2016 at 04:31 PM
    is it possible to get the scrollbarjust to scroll vertical, and in a wider and different style type than the page scroll, so the user dont get confused?
    scrollbar styles scrollbar
  • Profile Image
    JotForm Support

    Answered by Welvin on May 01, 2016 at 06:32 PM

    To remove the scrollbar at the bottom, add the following custom CSS codes to your form:

    .jotform-form {

    overflow-x: hidden;

    }

     

    To style the scrollbar of the form, generator the codes in the below website and copy/paste the generated codes to the custom CSS area of the form.

    http://mikethedj4.github.io/Webkit-Scrollbar-Generator/

    Simply remove the following lines in the generated CSS:

    <style type="text/css"> and the </style>

    Example:

    ::-webkit-scrollbar {

      width: 10px;

      height: 10px;

    }

    ::-webkit-scrollbar-button {

      width: 0px;

      height: 0px;

    }

    ::-webkit-scrollbar-thumb {

      background: #008000;

      border: 0px none #ffffff;

      border-radius: 0px;

    }

    ::-webkit-scrollbar-thumb:hover {

      background: #008040;

    }

    ::-webkit-scrollbar-thumb:active {

      background: #004000;

    }

    ::-webkit-scrollbar-track {

      background: #ff0080;

      border: 16px solid #8000ff;

      border-radius: 50px;

    }

    ::-webkit-scrollbar-track:hover {

      background: #666666;

    }

    ::-webkit-scrollbar-track:active {

      background: #333333;

    }

    ::-webkit-scrollbar-corner {

      background: transparent;

    }

     

    Note, this will only work for Chrome. You won't see this on a non-webkit browser such as Firefox. 

     

    Here's an example: https://form.jotform.com/61217199111955