Styling textarea scrollbar

[mostafaghanbari]

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!

[Paulie_D]

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

See: https://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.

[Andy Howells]

@chriscoyier did an article on custom scroll bars previously – https://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.

[mostafaghanbari]

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

[vivek Digarse]

sir ,scrollbar code not working in mozilla browser why?

https://css-tricks.com/examples/WebKitScrollbars/

it is work only safari and chrome.

[happycodings]

http://html-css.happycodings.com/textarea-tag-scroll-bar-color-properties.html

Textarea tag Scroll Bar Color Properties

<textarea cols=”40″
rows=”10″
wrap=”off”
style=”scrollbar-arrow-color:pink;
scrollbar-base-color:red;
scrollbar-darkshadow-color:blue;
scrollbar-highlightcolor:orange;
scrollbar-shadow-color:green”>

   Have a heart that never hardens,
   and a temper that never tires,
   and a touch that never hurts.

   Charles Dickens

</textarea>

[Author]

Posts