How to remove the arrows in a scroll bar through CSS

Question

Generally in a scroll bar there will be up and down arrows at both ends in a vertical scroll bar.

Is there anyway to remove it so that only the scroll bar appears 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

By Assuming that you want to customize the browser scrollbar,

You can do this easily with some nice Jquery Plugins, or you can do the magic with css. But it only works on webkit browsers for now, Here is 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); 
}

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

Else you can use a plugin. (Recommended)

As in an early comment, i suggest you use the niceScroller Plugin. That's nice and easy.

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

Simple Implementation

<script> 

     $(document).ready(

      function() { 

        $("html").niceScroll();

      }

    );

</script>