如何在textarea输入中更改滚动条？

Question

我需要知道如何更改textarea输入，例如我想添加自己的箭头和条形。

我知道我们可以在CSS中更改颜色，但我想添加自己的照片，就像在这张照片中一样

我想在用户可以输入的textarea输入中找到它。我们可以这样做吗？

编辑： jScrollPane无法使用textarea输入，请检查此图片

Answer 1

这就差不多了：

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 2

我做了一些实验，似乎如果你把<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>

在你的情况下：

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

Answer 3

您可以通过让您自己的div浮动到编辑区域的右侧来完成此操作。然后你必须附加javascript或jquery代码来观察被拖动的滚动图像，以确定你的文本输入区域应该显示的高低。

Answer 4

您需要使用Javascript，例如： This

Answer 5

你可以这样做..但是你需要使用JS ...它只能用css完成...你可以使用web上的好工具，这取决于你的JS框架使用

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

最好使用框架来执行此操作，因为它可能会让您头疼，试图让它在不同的浏览器中运行

Answer 6

jScrollPane是jquery的插件，可以执行类似的操作。

也许你正在寻找这个。

Answer 7

有一个脚本完全符合您的要求，请查看http://studio.radube.com/html-textarea-custom-scrollbar。您可以使用纯CSS和自己的图像自定义它。