如何更改滚动条的颜色

我想在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>

上面的代码是在我的头，但它并没有改变滚动条颜色。

任何人都可以帮助我吗？

来源

2010-01-04 Gopal

请不要更改我的滚动条的颜色，它是浏览器镶边的一部分，并且已经剥皮以匹配我的操作系统。 – Karl 2010-01-04 05:42:57

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

来源

2010-01-04 06:08:43 Newtang

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

来源

2010-01-04 05:29:02

也使用Firefox。 – Gopal 2010-01-04 05:31:46

它*仅适用于Internet Explorer 5+，显然已在IE8中停用。 – 2010-01-04 05:33:50

试试这个

*, 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;}

来源

2010-01-04 05:29:57

这只会在IE6和7上工作。不是IE8，Firefox，Safari等 – Newtang 2010-01-14 03:23:40

它工作在IE5到7并已在IE8已经停产。 Safari最近使用了我相信的不同css属性来支持它。

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

来源

2010-01-04 05:30:16 alex

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

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

来源

2012-06-23 18:29:39 Ruth

对于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; 
}

来源

2012-08-07 14:29:59 CoursesWeb

此代码是easyer刚粘贴后

<头>

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

来源

2013-01-23 02:18:55 tiaratial

看来OP对背景颜色感兴趣，而不是背景图像。 – 2013-01-23 02:36:53

它的工作，能够改变背景和滚动条的颜色与代码。 – JohnA10 2017-11-29 20:55:50

只需复制并粘贴

即可个

1.rounded角落风格

<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

来源

2013-01-23 02:52:13 tiaratial

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; 
}

来源

2014-02-13 03:36:49 CodeOptimizer

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

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

除了上述的风格，你将有scrollbarShadowColor，scrollbarHighlightColor，scrollbar3dlightColor，scrollbarDarkshadowColor等，所以，选择你的滚动条的组成部分，并改变它的颜色。

来源

2015-02-04 12:35:58

如何更改滚动条的颜色

回答

相关问题