Html CSS:如何更改webkit中滚动条右下角正方形的颜色?
问题: 如何在webkit(Google Chrome)中更改滚动条右下角的颜色(变为黑色) 这就是我到目前为止所做的:Html CSS:如何更改webkit中滚动条右下角正方形的颜色?,html,css,webkit,Html,Css,Webkit,问题: 如何在webkit(Google Chrome)中更改滚动条右下角的颜色(变为黑色) 这就是我到目前为止所做的: /* 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-
/*
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);
}
啊,没关系:
找到答案
我看到左边有一个滚动条,上面有一个滚动条,但正方形不是滚动条的一部分。@斯塔克:是的,但不是拇指的。这是角落。这不只是背景吗?@stark:不,绝对不是。框架背景设置为灰色。感谢您回答自己的问题。确实为我节省了不少时间。@Jeremy Chone:谢谢你的确认,我想是的;)
::-webkit-scrollbar-corner {
/*
background-image: url(resources/corner.png);
background-repeat: no-repeat;
*/
background-color: #3D3D3D;
}