如何更改滾動條的顏色

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

如何更改滾動條的顏色

回答

相關問題