CODEWITHSUNDEEP
htmlcss
Saleh
Saleh

Reputation: 2719

How to change scrollbar in textarea input?

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

alt text

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

alt text

Upvotes: 5

Views: 17299

Answers (7)

Liam Sperry
Liam Sperry

Reputation: 318

I did some experimenting and it seems that if you put the <style></style> tags after the text area, the scroll bar css doesn't have to be any different as if you were trying to style the body overflow. But a solid explanation is something I lack, I just hope this helps.

var cin = document.getElementById("cin");

cin.innerHTML = "\n \n \n \n\n\n\n\n\n\n\n\n\n\n scrollbar works";
<textarea id="cin" rows="10"></textarea>
<style>
#cin{
	overflow: auto;
	overflow-x: hidden;
}

#cin::-webkit-scrollbar-track{
	background-color: white;
}

#cin::-webkit-scrollbar{
	width: 6px;
	background-color: #F5F5F5;
}

#cin::-webkit-scrollbar-thumb{
	border-radius: 100px;
	box-shadow: 3px 0px 12px 4px grey;
	background-color: rgba(58, 166, 0, 0.81);
}
</style>

in your case:

<textarea cols="20" rows="10" id="cin">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretum nisl, Intger quis tellus nec turpis placerat scelerisque. In semper lacus eu nisi. Prasent dignissim metus sit amet enim Nam auctor, neque semper congue sagittis, nisus mi commodo pede, nec euismod magna</textarea>
<style>
#cin{
	overflow: auto;
	overflow-x: hidden;
}

#cin::-webkit-scrollbar-track{
	background-color: #e2e2e2;
}

#cin::-webkit-scrollbar{
	width: 6px;
	background-color: #F5F5F5;
}

#cin::-webkit-scrollbar-thumb{
	border-radius: 100px;
	background-color: #545454;
}
</style>

Upvotes: 3

randall
randall

Reputation: 57

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.

Upvotes: 0

David
David

Reputation: 13999

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...

Upvotes: 5

Nivas
Nivas

Reputation: 18344

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

Perhaps you are looking for this.

Upvotes: 0

pleasedontbelong
pleasedontbelong

Reputation: 20102

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

Upvotes: 0

fredley
fredley

Reputation: 33871

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

Upvotes: 0

Brian Scott
Brian Scott

Reputation: 9361

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.

Upvotes: 0

Related Questions