Grow your CSS skills. Land your dream job.

Styling textarea scrollbar

  • # February 26, 2013 at 6:23 am

    hey guys. i created a [codepen](http://codepen.io/mostafaghanbari-cssmax/pen/ylJgd) for this question and my question is:


    1 . **how can i style a textarea scroll bar using CSS?**

    2 . **how can i change direction of a textarea scroll bar?**


    ####The Comment:
    (**I**)there is a [jQuary plugin](http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html) for having fancy scrollbars but i want to know if there is or are any other ways.(**II**) direction of scroll bars in textareas depends on the web browser you are watching the page with. for example if you see [the pen](http://codepen.io/mostafaghanbari-cssmax/pen/ylJgd) with safari, the scrollbar appears in the right side of textarea!

    # February 26, 2013 at 6:31 am

    CSS – I think you can only style these in Webkit.

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

    Basically, you pretty can’t style these with CSS (except as mentioned above) because they are browser objects rather than HTML elements and each browser will choose to render then in it’s own way.

    Webkit is, AFAIK, the only one which will let you style them.

    BTW…you mean position, not direction.

    # February 26, 2013 at 6:33 am

    @chriscoyier did an article on custom scroll bars previously – http://css-tricks.com/custom-scrollbars-in-webkit/

    Edit: @paulie_d beat me too it!

    With regard to changing the direction I’m unsure if it’s possible but even if it is it might be confusing for users if you reverse it, so I wouldn’t recommend it.

    # February 26, 2013 at 6:38 am

    very good point @Paulie_D, especially when you said:
    > they are browser objects rather than HTML elements and each browser will choose to render then in it’s own way.

    so i think jQuery is my answer. thanks

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".