How to change scrollbar in textarea input?

Question

Hi

I need to know how to change textarea input, for example I want to add my own arrows and bars.

I know we can change colors in CSS but I want to add my own pictures just like in this picture

I want it in textarea input where user can type. Can we do that??

EDIT : jScrollPane is not working with textarea input, check this image

Answer 1

You can do this by having your own div floated to the right of the edit area. Then you would have to attach javascript or jquery code to observve the scroll image being dragged in order to determine how high or low your text input area should be displayed.

Answer 2

You will need to use Javascript for this, e.g. This.

Answer 3

you can do that.. but you'll need to work with JS... it cant be done with just css... there are good tool on the web that you can use, depending on the JS framework that you use

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

it's better to use a framework to do this because it might save you a headache trying to make it work in different browsers

Answer 4

jScrollPane is a plugin for jquery that does something like this.

Perhaps you are looking for this.

Answer 5

This is about as close as you'll get:

body   {
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
html {
overflow-y: auto;
background-color: transparent;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  {
height: 10px;
background-color: transparent;
}
::-webkit-scrollbar-track-piece  {
background-color: #eeeeee;
-webkit-border-radius: 16px;
}
::-webkit-scrollbar-thumb:vertical {
height: 10px;
background-color: #666;
border: 1px solid #eee;
-webkit-border-radius: 16px;
}

As far as I know you can't use images, only CSS styling...

Answer 6

There's a script that do exactly what you want, check out http://studio.radube.com/html-textarea-custom-scrollbar . You can customize it with pure css and your own images.