How to change scrollbar in textarea input?

Question

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

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 2

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>