Question

我想在Internet Explorer和Firefox中更改页面上滚动条的颜色。

此代码创建滚动条：

<div style="overflow: auto; width: 750px; height: 400px">   
</div>

要改变颜色，我尝试了这段代码：

<STYLE TYPE="text/css">

BODY
{
scrollbar-base-color: orange;
scrollbar-arrow-color: green;
scrollbar-DarkShadow-Color: blue;
}
</STYLE>

上面的代码在我的标题中，但它没有改变滚动条的颜色。

任何人都可以帮助我吗？

Answer 1

正如其他人所说，您发布的CSS不适用于现代浏览器（IE8，Safari，Firefox等）。因为您尝试滚动div，所以您可以选择在Javascript / DHTML中创建自定义滚动条。一个快速的谷歌搜索显示有一些像这样做：http://www.hesido.com/web.php?page=customscrollbar

Answer 2

对于Chrome和Safari，您可以使用以下代码更改滚动条样式：

/* Chrome, Safari */
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track-piece  {
background-color: #C2D2E4;
}
::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}

Answer 3

只需复制并粘贴到

之后

1. ground corner style

<style type="text/css">
::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; }
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 1ex; }
</style>

2.带边框样式的方角

<style type="text/css">
::-webkit-scrollbar {width: 9px; height: 3px; background: #FFFFFF;}
::-webkit-scrollbar-thumb {background-color:#ffffff ; border: 1px solid black;}
</style>

您可以更改代码click here或here

的颜色

Answer 4

该代码仅适用于Internet Explorer。您是偶然在Firefox或Safari中测试的吗？

Answer 5

它适用于IE5到7.它已在IE8中停止使用。 Safari最近使用我认为的不同css属性支持它。

更改滚动条颜色存在可用性问题。

Answer 6

为div创建一个类，对该类中的滚动条颜色进行编码，然后将其应用于div。您没有更改浏览器上的滚动条颜色，只更改您正在创建的div。你的div将是<div style="overflow: auto; width: 750px; height: 400px" class="className"> </div>

在您的课程中，您将使用适用的滚动条部件名称创建滚动条颜色，即滚动条面颜色等。要找出哪些代码适用于滚动检查http://iebar.discoveryvip.com/的哪个区域，或者您可以在网上搜索，有许多地方可供选择。

Answer 7

这段代码很容易在

后粘贴

＆LT;是一个＆gt;

<style type="text/css">
::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; }
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 1ex; }
</style>

Answer 8

试试这个

*, html {
scrollbar-face-color: #FF0000;
scrollbar-shadow-color: #0000FF;
scrollbar-highlight-color: #00FF00;
scrollbar-3dlight-color: #FF00FF;
scrollbar-darkshadow-color: #00FFFF;
scrollbar-track-color: #FFFF00;
scrollbar-arrow-color: #000000;}

Answer 9

enter code here


html,body{
     scrollbar-face-color: #414340;
            scrollbar-shadow-color: #cccccc;
            scrollbar-highlight-color: #cccccc;
            scrollbar-3dlight-color: #cccccc;
            scrollbar-darkshadow-color: #cccccc;
            scrollbar-track-color: #cccccc;
            scrollbar-arrow-color: #000000;
}

Answer 10

我们也可以使用javascript更改滚动条的颜色。滚动条中有各种组件，如基色，面颜色，箭头颜色等，可以改变滚动条各部分的颜色。以下几行可能会对您有所帮助。

document.body.style.scrollbarBaseColor = "colorname";
document.body.style.scrollbarArrowColor = "colorname";
document.body.style.scrollbarTrackColor = "colorname";

除了上述样式之外，您还将拥有scrollbarShadowColor，scrollbarHighlightColor，scrollbar3dlightColor，scrollbarDarkshadowColor等。因此，选择滚动条的组件并更改其颜色。

如何更改滚动条的颜色

10 个答案: