如何更改webkit中滚动条右下方正方形的颜色

如何更改webkit中滚动条右下方正方形的颜色

本文介绍了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-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中滚动条右下方正方形的颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-22 23:00