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

debugcn 发表于 Dev

有人

所以，我已经成功地得到了我想要的滚动条，但无论出于何种原因——无论是自从我上次尝试这样做以来编码发生了变化，还是生病让我忘记了这样做的正确方法—— - 我无法使文本框的滚动条匹配。

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

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

黑咖啡

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。