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

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尝试添加文本框的类。像这样。希望这有帮助

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;