如何设计文本框的滚动条以匹配网站的滚动条？

Question

所以，我已经成功地得到了我想要的滚动条，但不管是什么原因——自从我上次尝试这样做以来，编码已经改变了，或者是生病让我忘记了正确的滚动条这样做的方法——我无法设法让文本框的滚动条匹配。

现在，它最终看起来像这样，只是……看起来不太好：

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

Answer 1

enter code here也尝试添加文本框的 class。像这样。希望这有帮助

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

如何设计文本框的滚动条以匹配网站的滚动条？

How to style a Textbox's Scrollbar to match the website's scrollbar?

html

css

scroll

webkit

scrollbar