如何更改textarea輸入中的滾動條？

Question

我需要知道如何更改textarea輸入，例如我想添加自己的箭頭和條。

我知道我們可以在CSS改變顏色，但我想在這張照片

我想在textarea的輸入端，此時用戶可以鍵入添加自己的照片一樣。我們能做到嗎？

編輯： JScrollPane的不與textarea的輸入工作，通過擁有自己的div浮動到編輯區右邊選中該圖片

Answer 1

有一個腳本，做完全你想要什麼，退房http://studio.radube.com/html-textarea-custom-scrollbar。您可以使用純CSS和自己的圖像進行自定義。

Answer 2

你可以做到這一點。然後，您必須附加javascript或jquery代碼才能觀察拖動的滾動圖像，以確定您的文本輸入區域應該顯示的高低。

Answer 3

您需要爲此使用Javascript，例如This。

Answer 4

你可以做到這一點..但你需要與JS一起工作......它不能用css來完成......你可以使用web上的好工具，這取決於JS框架您使用

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

，最好用一個框架來做到這一點，因爲它可能會節省你頭疼試圖使它在不同的瀏覽器

Answer 5

jScrollPane工作的jQuery插件，做這樣的事情。

也許你正在尋找這個。

Answer 6

這是最接近你會得到：

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 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{ 
 
\t overflow: auto; 
 
\t overflow-x: hidden; 
 
} 
 

 
#cin::-webkit-scrollbar-track{ 
 
\t background-color: white; 
 
} 
 

 
#cin::-webkit-scrollbar{ 
 
\t width: 6px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#cin::-webkit-scrollbar-thumb{ 
 
\t border-radius: 100px; 
 
\t box-shadow: 3px 0px 12px 4px grey; 
 
\t 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{ 
 
\t overflow: auto; 
 
\t overflow-x: hidden; 
 
} 
 

 
#cin::-webkit-scrollbar-track{ 
 
\t background-color: #e2e2e2; 
 
} 
 

 
#cin::-webkit-scrollbar{ 
 
\t width: 6px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 
#cin::-webkit-scrollbar-thumb{ 
 
\t border-radius: 100px; 
 
\t background-color: #545454; 
 
} 
 
</style>