logo标签列表

如何更改文本区输入框中的滚动条？

htmlcss
5
我需要知道如何更改文本区域输入，例如我想添加自己的箭头和条形图案。我知道我们可以在CSS中更改颜色，但我想像这张图片一样添加自己的图片。
我希望它出现在用户可以输入的文本区域内。我们能做到吗？
编辑：jScrollPane不能与文本区域输入一起使用，请查看此图像。
7个回答
5
这大概是最接近的了：
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样式...
3

我进行了一些实验，发现如果您将<style></style>标签放置在文本区域之后，滚动条的css就不必与尝试样式化body overflow时有任何不同。但是我缺乏一个明确的解释，希望这可以帮到您。

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>

0
0
你可以通过拥有自己的 div 元素浮动到编辑区域的右侧来实现此操作。然后，您需要附加 JavaScript 或 jQuery 代码来观察滚动图像被拖动时，以确定文本输入区域应该显示多高或多低。
0

你需要使用JavaScript来完成这个任务，例如这个链接。

0

你可以这样做，但是你需要使用JS来完成，不能仅仅使用CSS。根据你使用的JS框架，有很多好用的网络工具可供使用。

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

最好使用框架来完成这个任务，因为它可以帮助你避免在不同的浏览器中尝试使其正常工作时感到头痛。

是的，我刚意识到你想要改变TEXTAREA上的滚动条...大多数解决方案只适用于你无法更改文本的div。我找不到任何例子，你必须隐藏滚动条并使用JS开发自己的滚动条，将事件附加到textarea滚动条上...但这会非常困难（至少对我来说），因为你必须根据文本长度更改滚动条的大小，并使其像普通的textarea一样动态。 - pleasedontbelong
0

jScrollPane 是一个 jQuery 插件，可以实现类似这样的功能。

也许您正在寻找这个。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接