我需要知道如何更改文本区域输入,例如我想添加自己的箭头和条形图案。我知道我们可以在CSS中更改颜色,但我想像这张图片一样添加自己的图片。
我希望它出现在用户可以输入的文本区域内。我们能做到吗?
编辑:jScrollPane不能与文本区域输入一起使用,请查看此图像。
我希望它出现在用户可以输入的文本区域内。我们能做到吗?
编辑:jScrollPane不能与文本区域输入一起使用,请查看此图像。
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;
}
我进行了一些实验,发现如果您将<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>
有一个脚本可以完全满足您的需求,请查看http://studio.radube.com/html-textarea-custom-scrollbar。您可以使用纯CSS和自己的图像进行自定义。
你可以这样做,但是你需要使用JS来完成,不能仅仅使用CSS。根据你使用的JS框架,有很多好用的网络工具可供使用。
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
最好使用框架来完成这个任务,因为它可以帮助你避免在不同的浏览器中尝试使其正常工作时感到头痛。