CSS：如何更改webkit中滚动条右下方正方形的颜色？ [英] CSS: How to change the color of the bottom right square of the scrollbar in 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-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：horizo​​ntal：decrement 
 {
 background-image：url（./ images / horizo​​ntal-decrement- png）; 
 background-position：4px 3px; 
} 
 
 ::  -  webkit-scrollbar-button：horizo​​ntal：increment 
 {
 background-image：url（./ images / horizo​​ntal-increment- png）; 
 background-position：3px 3px; 
} 
 
 ::  -  webkit-scrollbar-button：vertical：decrement 
 {
 background-image：url（./ images / vertical-decrement- png）; 
 background-position：3px 4px; 
} 
 
 ::  -  webkit-scrollbar-button：vertical：increment 
 {
 background-image：url（./ images / vertical-increment- png）; 
 background-position：3px 4px; 
} 
 
 ::  -  webkit-scrollbar-button：horizo​​ntal：decrement：active {background-image：url（./ images / horizo​​ntal-decrement-arrow-active.png）; } 
 
 ::  -  webkit-scrollbar-button：horizo​​ntal：increment：active {background-image：url（./ images / horizo​​ntal-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：horizo​​ntal 
 {
 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）; 
} 
  

解决方案

/ p>

找到的答案这里

  ::  -  webkit-scrollbar-corner {
 / * 
 background- image：url（resources / corner.png）; 
 background-repeat：no-repeat; 
 * / 
 background-color：＃3D3D3D; 
} 
  

Question:

How can I change the color of the bottom-right square of the scrollbar (to black) in webkit (Google-Chrome) ?

This is what I have so far:

/*
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); 
}

解决方案

Ah, never mind:

Answer found here

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

这篇关于CSS：如何更改webkit中滚动条右下方正方形的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！