html - CSS:如何更改 webkit 中滚动条右下角的颜色?

标签 html css webkit

问题:

如何在 webkit (Google-Chrome) 中更改滚动条右下角方 block 的颜色(黑色)?

Scrollbar

这是我目前所拥有的:

/*
http://www.coffeepowered.net/2011/06/17/sexy-css-scrollbars/
http://css-tricks.com/custom-scrollbars-in-webkit/
*/
::-webkit-scrollbar {
    width: 13px;
    height: 13px; }

::-webkit-scrollbar:hover {
    height: 18px; }

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment 
{
    height: 15px;
    width: 13px;
    display: block;
    background: #101211;
    background-repeat: no-repeat; 
}

::-webkit-scrollbar-button:horizontal:decrement 
{
    background-image: url(./images/horizontal-decrement-arrow.png);
    background-position: 4px 3px; 
}

::-webkit-scrollbar-button:horizontal:increment 
{
    background-image: url(./images/horizontal-increment-arrow.png);
    background-position: 3px 3px; 
}

::-webkit-scrollbar-button:vertical:decrement 
{
    background-image: url(./images/vertical-decrement-arrow.png);
    background-position: 3px 4px; 
}

::-webkit-scrollbar-button:vertical:increment 
{
    background-image: url(./images/vertical-increment-arrow.png);
    background-position: 3px 4px; 
}

::-webkit-scrollbar-button:horizontal:decrement:active { background-image: url(./images/horizontal-decrement-arrow-active.png); }

::-webkit-scrollbar-button:horizontal:increment:active { background-image: url(./images/horizontal-increment-arrow-active.png); }

::-webkit-scrollbar-button:vertical:decrement:active { background-image: url(./images/vertical-decrement-arrow-active.png); }

::-webkit-scrollbar-button:vertical:increment:active { background-image: url(./images/vertical-increment-arrow-active.png); }


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

::-webkit-scrollbar-track-piece {
    background-color: #151716; }

::-webkit-scrollbar-thumb:vertical 
{
    height: 50px;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #4d4d4d), color-stop(100%, #333333));
    border: 1px solid #0d0d0d;
    border-top: 1px solid #666666;
    border-left: 1px solid #666666; 
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

::-webkit-scrollbar-thumb:horizontal 
{
    width: 50px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4d4d4d), color-stop(100%, #333333));
    border: 1px solid #1f1f1f;
    border-top: 1px solid #666666;
    border-left: 1px solid #666666; 
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

最佳答案

啊,没关系:

已找到答案 here

::-webkit-scrollbar-corner {
/*
background-image: url(resources/corner.png);
background-repeat: no-repeat;
*/
background-color: #3D3D3D;
}

关于html - CSS:如何更改 webkit 中滚动条右下角的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11667890/

相关文章:

html - 光滑的旋转木马向左箭头隐藏

javascript - 如何在 Safari 中使用 Clipboard API 将图像写入剪贴板

javascript - Node-webkit 只运行 .js 文件?

html - 清除: right with <span>

html - CSS 文本覆盖图像

html - 不使用容器清除 float

css - 为什么看不到本地 bootstrap.css?

java - 使用 WebKit 浏览器(Chrome、Safari)的 Jersey 2.15 缺少起始边界

c# - 从 websocket 服务器(用 c#/vb.net 编写)接收数据作为图像

java - Spring MVC 将空白 View 返回给用户