怎样改变Firefox里滚动条的颜色 用css

Question

我在样式里改变了滚动条的颜色，但是只有在IE里好用，Firefox里不好用。
我想用样式来控制Firefox里的滚动条颜色。我该怎么写。

Answer 1

js 或者 jq
纯CSS很难做到~！！

可以尝试搜素 CSS+js模仿滚动条~！本回答被提问者采纳

Answer 2

用js或者jq用css太麻烦不值当的

Answer 3

@-moz-document url-prefix(http://),
url-prefix(https://),
url("chrome://browser/content/bookmarks/bookmarksPanel.xul"),
url("chrome://browser/content/browser.xul"),
url("chrome://browser/content/history/history-panel.xul") {
/* THIS WHOLE CODE SECTION AUTOHIDES ONLY THE VERTICAL SCROLLBARS OF WEBPAGES */
scrollbar *
scrollbar scrollbarbutton { display: none ! important; }
scrollbar scrollbarbutton { visibility: collapse !important }

scrollbar[orient="vertical"]{
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAACCAYAAABsfz2XAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAhSURBVHjaYvj//z8DMvb39/+PLoaMmRhIBAAAAAD//wMAB6Qizv4lfkgAAAAASUVORK5CYII=") ! important;

-moz-appearance: none !important;
background-color: transparent !important;
opacity: .75 !important;
min-width: 9px !important;
max-width: 9px !important;
}

/*CAN CHANGE SCROLLBAR WIDTH FROM Default 17px (MUST CHANGE BOTH min-width and max-width to exact same px */
/*Default vertical scrollbar width is 17px */
scrollbar[orient="vertical"]:hover
{
opacity: 1 !important;
-moz-appearance: none !important;
background-color: transparent !important;
min-width: 9px !important;
max-width: 9px !important;
}
/************************************************************************/

/* button you drag down the strip */

scrollbar thumb[orient="vertical"]
{
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAnSURBVHjaYmQofPWfgQjwv0+UkYGBgYGJgUQwqmGkaAAAAAD//wMA+/4EFULQY9sAAAAASUVORK5CYII=") ! important;

-moz-appearance: none !important;
border-radius: 4px !important;
min-width: 8px !important;
max-width: 8px !important;
border: 1px !important;
}

/* HOVER:button you drag down the strip */

scrollbar thumb[orient="vertical"]:hover

{background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAnSURBVHjaYmQofPWfgQjwv0+UkYGBgYGJgUQwqmGkaAAAAAD//wMA+/4EFULQY9sAAAAASUVORK5CYII=") ! important;

border-radius: 4px !important;
border: 0px !important;
}

/***************************************************************************/

/*////////////////////////////////////////////////////////////////////////////*/

/* THIS WHOLE CODE SECTION AUTOHIDES ONLY THE HORIZONTAL SCROLLBARS OF WEBPAGES */
/*can increase min-height 5px and max-height 5px to have more grab space for horizontal scrollbar (min-height and max-height must be exact same px)*/

scrollbar[orient="horizontal"]{
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAMCAYAAABIvGxUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAmSURBVHjaYvz//z8DAwMDAxMDFGAyGP39/f8zMDAwMBKhGA8DMAB8qAf8L6w8LwAAAABJRU5ErkJggg==") ! important;

-moz-appearance: none !important;
background-color: transparent !important;
opacity: .75 !important;
min-height: 9px !important;
max-height: 9px !important;
}

/*CAN MAKE HORIZONTAL SCROLLBARS LESS HEIGHT when hovered BELOW:MUST HAVE min-height and max-height exact same px */
/* Default horizontal height is 17px */
scrollbar[orient="horizontal"]:hover
{
opacity: 1 !important;
-moz-appearance: none !important;
background-color: transparent !important;
min-height: 9px !important;
max-height: 9px !important;
}

/*////////////////////// bar /////////////////////////////////////////*/

/* button you drag down the strip */

scrollbar thumb[orient="horizontal"]
{
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAmSURBVHjaYmQofPWfgQTAxEAiGNUwODQw/v//n7Y2AAAAAP//AwCb0AVuQc6u0wAAAABJRU5ErkJggg==") ! important;

-moz-appearance: none !important;
border-radius: 4px !important;
min-height: 8px !important;
max-height: 8px !important;
border: 1px !important;
margin-left: 0px !important;
}

/* HOVER:button you drag down the strip */

scrollbar thumb[orient="horizontal"]:hover

{background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAmSURBVHjaYmQofPWfgQTAxEAiGNUwODQw/v//n7Y2AAAAAP//AwCb0AVuQc6u0wAAAABJRU5ErkJggg==") ! important;

border-radius: 4px !important;
border: 0px !important;
}

/*///////////////////////////////////////////////////////////////////*/

/* REMOVES THE SCROLLBAR CORNERS THAT CAN BE SEEN ON DARK COLORED WEBPAGES */

scrollcorner{opacity: 0 !important;}

scrollbar scrollcorner:hover {background:transparent !important;}

}

Answer 4

页面滚动条代码及其解释如下：
　　scrollbar-3d-light-color 设置或检索滚动条亮边框颜色
　　scrollbar-highlight-color 设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色
　　scrollbar-face-color 设置或检索滚动条3D表面（ThreedFace）的颜色
　　scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色
　　scrollbar-shadow-color 设置或检索滚动条3D界面的暗边（ThreedShadow）颜色
　　scrollbar-dark-shadow-color 设置或检索滚动条暗边框（ThreedDarkShadow）颜色
　　scrollbar-base-color 设置或检索滚动条基准颜色。其它界面颜色将据此自动调整

CSS设置滚动条颜色实例代码：

以下为引用的内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS设置滚动条颜色 www.phpq.net</title>
<style type="text/css">
<!--
#height {height:1000px;}
html {
　scrollbar-face-color:#C00;
　scrollbar-highlight-color:#F60;
　scrollbar-3dlight-color:#F00;
　scrollbar-darkshadow-color:#000;
　scrollbar-Shadow-color:#000;
　scrollbar-arrow-color:#FFF;
　scrollbar-track-color:#D6A27E;
}
-->
</style>
</head>
<body>
<div id="height"></div>
</body>
</html>

Answer 5

火狐就不能使用。
其实网站说的把body换成html的意思是: ie8这种标准浏览器吧