How can I change the color of scroll bar

Question

I have Task to change the color of scroll bar.For that I used the jscrollpane.By doing this only the browser scroll is changed.I want to change the color of the dropdown list also.How can I do this? html is

  <div class='columnLeft'>
       <div class="labels w110">
            <label>Country</label>
       </div>
       <div class="controls hello" id="hello">
            @Html.DropDownList("ddlReCountry", null, new { @onchange = "onReBindCountry()", @class = "dropdown w325" })
       </div>
  </div>

javascript is

 $(function () {
            $('.hello ').jScrollPane();
            $('#hello').bind(
            'jsp-scroll-y',
        function (event, scrollPositionY, isAtTop, isAtBottom) {
            console.log('#pane1 Handle jsp-scroll-y', this,
                        'scrollPositionY=', scrollPositionY,
                        'isAtTop=', isAtTop,
                        'isAtBottom=', isAtBottom);
        });
 });

css is

.jspTrack {
    background: lightgray !important;
}

.jspDrag {
    background: gray !important;
}

Answer 1

I am not really sure if you can. but you can build your own dropdown list using textbox,button and div that will be opened after clicking the button. In this way you can customize every thing in the dropdown even the content of the drop down, you can search on the net there is a plenty samples of such approch you can use one of them