How to remove arrows in scrollbar via CSS

Question

Usually in the scroll bar at both ends there will be up and down arrows in the vertical scroll bar.

In any case, delete it so that only the scroll bar is displayed, and not the arrows at both ends. Below is my CSS:

.scrollbar-vertical { top: 0; right: 0; width: 17px; height: 100%; overflow-x: hidden; scrollbar-3dlight-color:#999; scrollbar-arrow-color:white; scrollbar-base-color:white; scrollbar-face-color:#999; border-radius:5px 5px; } 

Answer 1

Assuming you want to customize your browser scrollbar,

You can do it easily with some nice jQuery plugins, or you can do the magic with css. But it only works in webkit browsers, here's how

 ::-webkit-scrollbar { width: 12px; } /* Track */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: rgba(255,0,0,0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); } 

Source: http://css-tricks.com/custom-scrollbars-in-webkit/

Otherwise, you can use the plugin. (Recommended)

As in the early commentary, I suggest using the niceScroller plugin. It is nice and easy.

Source: http://areaaperta.com/nicescroll/

Simple implementation

 <script> $(document).ready( function() { $("html").niceScroll(); } ); </script> 

Answer 2

You can use the style below in your CSS to hide the scroll arrows,

 ::-moz-scrollbar-button:decrement, ::-moz-scrollbar-button:increment, ::-webkit-scrollbar-button:decrement, ::-webkit-scrollbar-button:increment { width: 0px; } 

or

 ::-moz-scrollbar-button, ::-webkit-scrollbar-button { width: 0px; } 

Answer 3

 visibility: collapse !important; 

may be?