Jquery - horizontal scroll bar in select box

Trying to add horizontal scroll bar in select box. Its very simple. Here follow the code and see the example.

<div id='Courselists' style="overflow-x:scroll; width:200px; overflow: -moz-scrollbars-horizontal;">
<select id='Courses' name="mySelect" size="15">
    <option value="5">Ajax</option>
    <option value="9">Animal</option>
    <option value="6">HETC course1</option>
    <option value="10">HTML</option>
    <option value="3">Java</option>
    <option value="4">mysql</option>
    <option value="11">Photoshop</option>
    <option value="2">PHP</option>
    <option value="8">Science</option>
    <option value="7">Test course: XS</option>
    <option value="12">Test test Test test Test test Test test Test test </option>
</select>
<div id="Scrolldiv" style='font-size: 1px'>&nbsp</div>
</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $('#Scrolldiv').css('width', $('#Courses').outerWidth());
    $('#Courses').css('width', $('#Courselists').outerWidth());
    $( "#Courselists" ).scroll(function() {
        $('#Courses').css('width', $(this).outerWidth() + $(this).scrollLeft());
    });
</script>

OUTPUT:
                 

Special thanks to Cyrus .