How to remove the arrows in a scroll bar through CSS

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>