如何設置文本框的滾動條的樣式以匹配網站的滾動條？

因此，我已經成功地獲得了我想要的滾動條，但是無論出於何種原因 - 無論是自上次試圖做到這一點或生病之後編碼已發生變化，都使我忘記了正確的方法所以 - 我不能設法讓文本框的滾動條匹配。如何設置文本框的滾動條的樣式以匹配網站的滾動條？

眼下，它結束了看起來像這樣，它只是......看起來並不大：

當前CSS：

.textbox {scrollbar-face-color: #29FDF1; 
scrollbar-shadow-color: #080C0D; 
scrollbar-highlight-color: #29FDF1; 
scrollbar-3dlight-color: #29FDF1; 
scrollbar-darkshadow-color: #080C0D; 
scrollbar-track-color: #080C0D; 
scrollbar-arrow-color: #29FDF1;} 

body::-webkit-scrollbar { 
    width: 7px; 
    background-color: #081114; 
} 

body::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 

body::-webkit-scrollbar-thumb { 
    background-color: #081114; 
    border: 1px solid #29FDF1; 
}

文本框當前HTML：

<div class="textbox" style="width: 200px; height: 200px; overflow:auto;"> 
TEXT HERE 
</div>

來源

2017-04-22 Someone

你的文本框的CSS應該是一類不ID – blecaf

@BlessingOni我認爲這是一類？ – Someone

你的css代碼的目標是「#textbox」而不是「.textbox」 – blecaf

enter code here嘗試添加文本框的類也。喜歡這個。希望這有助於

.textbox {scrollbar-face-color: #29FDF1; 
 
    scrollbar-shadow-color: #080C0D; 
 
    scrollbar-highlight-color: #29FDF1; 
 
    scrollbar-3dlight-color: #29FDF1; 
 
    scrollbar-darkshadow-color: #080C0D; 
 
    scrollbar-track-color: #080C0D; 
 
    scrollbar-arrow-color: #29FDF1;} 
 
    
 
    body::-webkit-scrollbar,.textbox::-webkit-scrollbar { 
 
     width: 7px; 
 
    } 
 
    
 
    body::-webkit-scrollbar-track, .textbox::-webkit-scrollbar-track { 
 
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
    } 
 
    
 
    body::-webkit-scrollbar-thumb, .textbox::-webkit-scrollbar-thumb { 
 
     background-color: #081114; 
 
     border: 1px solid #29FDF1; 
 
    }

<div class="textbox" style="width: 200px; height: 200px; overflow:auto;"> 
 
TEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERE 
 
</div>

來源

2017-04-22 05:00:32 blecaf

更新了這:)但不幸的是沒有改變的外觀:( – Someone

你必須在其中放置更多的文字，以便它溢出，然後你就可以看到滾動效果 – blecaf

我知道！它有足夠的文字實際上溢出（我只是使字體顏色與背景顏色相同，因爲它是所有的胡言亂語）。那就是說，使用你最近的編輯它似乎工作？所以謝謝！ – Someone

如何設置文本框的滾動條的樣式以匹配網站的滾動條？

回答

相關問題