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

  • Profile Image
    Asked 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?
  • Profile Image
    Answered 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.

    Simply remove the following lines in the generated CSS:

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


    ::-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: