How to change scroll bar in textbox?

Question

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

I know that we can change colors in CSS, but I want to add my own pictures in the same way as in this picture

I want it in the input text box where the user can enter. Can we do this?

EDIT: jScrollPane does not work with textarea input, check this image

Answer 1

There are scripts that do exactly what you want, see http://studio.radube.com/html-textarea-custom-scrollbar . You can customize it using pure CSS and your own images.

Answer 2

, :

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;
}

, , CSS...

Answer 3

, div . javascript jquery-, , , .

Answer 4

Javascript, . .

Answer 5

.. JS... css... , , JS,

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

, , .

Answer 6

jScrollPane - jquery, - .

, .

Answer 7

, , <style></style> , css , . - , , , .

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>

Hide result

:

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

Hide result