Customize Your Scroll Bar in Oracle APEX with Simple CSS

Want to give your Oracle APEX app a fresh look? Customizing the scroll bar is a quick and easy way to enhance your app's design. With just a few lines of CSS, you can give it a modern feel.

Steps to Customize Your Scroll Bar:

• Copy the code below:

/* Custom Scrollbar Styles */

/* Width of the scrollbar */
::-webkit-scrollbar {
    width: 8px !important;  /* Set scrollbar width */
    height: 10px;          /* Set scrollbar height */
  }
  
  /* Track background */
  ::-webkit-scrollbar-track {
    background: #f1f1f1 !important;  /* Track color */
  }
  
  /* Handle styles */
  ::-webkit-scrollbar-thumb {
    background: green !important;  /* Handle color */
    border-radius: 5px !important; /* Rounded handle */
  }
  
  /* Handle hover effect */
  ::-webkit-scrollbar-thumb:hover {
    background: lightgreen !important;  /* Hover color */
  }
        

• Go to the Theme Roller in your Oracle APEX application.
• Paste the code into the Custom CSS section.
• Save and run your application to see the difference!

You’ll notice the scroll bar now has a green handle with a light green hover effect, and the design will look much sleeker.

Customizing the scrollbar may seem like a minor tweak, but it can significantly enhance your Oracle APEX app. Here are a few reasons why:

• Improved User Experience: Custom scrollbars make your app feel more polished and professional.
• Design Cohesion: By aligning the scroll bar with your app's theme, you ensure a more cohesive look.
• Brand Identity: For apps with strict branding guidelines, every design element matters — including the scroll bar.