How to attach javascript scroll bar to textarea?

Question

I have a javascript scrollbar that replaces the normal webkit/mozilla scroll bar. it works on all my other divs just by typing in the div name ".element" however im not sure how to do get the scroll bar to apply to a text area? does anyone know how i would do this, would appreciate any ones help thanks.

JAVASCRIPT:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="assets/js/scroll/jquery.mousewheel.min.js"></script>
<script src="assets/js/scroll/jquery.mCustomScrollbar.js"></script>

<script>
    (function($){
        $(window).load(function(){
            $(".bio textarea").mCustomScrollbar();
        });
    })(jQuery);
</script>

HTML:

<form action="includes/changebio.php" method="post" id="form1">         
 <textarea id="bio" style="width: 442px; 
    margin-top:3px;
    text-align:left;
    margin-left:-2px;
    height: 120px;
    resize: none; 
  outline:none;
    border: hidden;" textarea name="bio" data-id="bio" maxlength="710"><?php echo stripslashes($profile['bio']); ?></textarea>
<input type="image" src="assets/img/icons/save-edit.png"class="bio-submit" name="submit" value="submit" id="submit"/>
</form>

Answer 1

This script will help you style a tex-area; http://studio.radube.com/html-textarea-custom-scrollbar. It can be customized with your own images and CSS.

Also check out this jQuery plugin:

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html