How do I style the scrollbar of a textarea

Question

I've got a textarea in a contact form which is styled with css, it looks great until i write more than the area can fit, when I do that a scrollbar appears and this scrollbar looks horrible with my dark styling (it's black with white text). So how would I go about to style this? I've googled some but haven't found any good answer just found all these IE-only colour changes.

Answer 1

Check out this jQuery plugin: http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

I learned about it from from this site, where you can see it in action on their "TribWire" sidebar: http://www.texastribune.org/

Answer 2

You can use this script http://studio.radube.com/html-textarea-custom-scrollbar and get a personalized textarea scrollbar.

Answer 3

@handsofaten: jScrollPane doesn't work on textarea elements because it dynamically adds div elements to the contents of the element you apply it to. You cannot add div elements to a textarea.

It would be possible by adding a wrapper element to the textarea and applying the scrollbar to that parent. I wouldn't recommend that however, because when you add text to a textarea, their content grow, not the textarea itself. You'd have to apply a hack to the textarea so that it grows with its content. Which probably results in an unstable mess.

So I'd let the idea go.

By the way: Webkit (Chrome, Safari) also supports a proprietary CSS way of styling scrollbars: http://webkit.org/blog/363/styling-scrollbars/

Answer 4

You can also check out http://www.css3.com. Click on SCROLLBAR... in the list. If it will work or not, I don't know. CSS3 isn't that well supported in browsers yet, but will hopefully be in the future.