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

作者&投稿:霜歪 (若有异议请与网页底部的电邮联系)
怎么改变CHtmlView中滚动条的颜色~

css实现的方法

在 与 之间加入:


body {
SCROLLBAR-FACE-COLOR: #ff99cc ;
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
SCROLLBAR-SHADOW-COLOR: #ff0000;
SCROLLBAR-3DLIGHT-COLOR: #ff0000;
SCROLLBAR-ARROW-COLOR: #ff0000;
SCROLLBAR-TRACK-COLOR: #ffcccc;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff
}


CSS属性属性说明
scrollbar-3dlight-color滚动条亮边框颜色
scrollbar-arrow-color滚动条方向箭头的颜色
scrollbar-darkshadow-color滚动条下边和右边的边沿颜色
scrollbar-face-color滚动条3D表面的颜色
scrollbar-highlight-color滚动条斜面和左面颜色
scrollbar-shadow-color滚动条下斜面和右面颜色
scrollbar-track-color滚动条底版颜色
scrollbar-base-color滚动条基准颜色。

颜色代码应该懂吧?修改就可以了

 这个颜色应该是手机系统默认的当获取焦点时的颜色,不同的API颜色是不同的,webview没法控制,你可以尝试修改webview加载的html的样式,看看可不可以修改。

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

可以尝试搜素 CSS+js模仿滚动条~!

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

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

}

页面滚动条代码及其解释如下:
  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>

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



怎样改变火狐浏览器标签页的长度
从Firefox 的菜单中选择“附加组件”,然后搜索并下载名为 Tab Mix Plus 的插件,重启firefox。然后在这个插件的设置项中依次选择:外观 → 标签栏外观 → “当所有标签页占用宽度超过标题栏时,启用”→ “多行标签页” → 确定,即可。操作过程如下图:...

火狐浏览器40.0.2更新了什么
火狐浏览器(Firefox)是一种区别于IE浏览器的新型浏览器,除了具有网页浏览器的功能之外,还包括更多特色功能,如阻止弹出广告,集成google工具栏功能,并且整合多种搜索引擎,实现更方面的信息检索等。火狐浏览器新版能方便的查看历史浏览记录,改变Firefox浏览器查看网页的文字大小,查看网页源代码。附带google...

火狐浏览器的的下载方式怎么更改啊?
改变火狐浏览器的下载方式需要选安装下载类的扩展,下载时才能选择下载方式。安装下载类的扩展方法:点击菜单栏上的“工具”,弹出菜单选择“附加组件”。点击“获取附加组件”,在右边输入下载类扩展名称进行搜索添加。或者在官网页面中进行手动查找添加。下载类扩展添加后,在下载时在提示窗口选择相应的方式...

如何优化火狐启动速度,目前开机第一次打开将近10秒
五. 使用Firefox优化软件 很多软件都可以对Firefox进行优化,我们推荐FasterFox,FasterFox 是一个Firefox的扩展,是专门为Firefox开发设计的网络性能调节与优化扩展插件,Fasterfox内含大量网络链接及相关的设置选项。可以 通过改变Firefox的网络参数来进行优化,从而大幅提高Firefox的速度。(注:扩展方法见下)六....

比较好用的浏览器(推荐使用的功能和优点)
比较好用的浏览器——Firefox Firefox是一款由Mozilla基金会开发的浏览器,它也有很多优点,下面我们来看看它的一些特点。1.安全性高 Firefox的安全性非常高,它有一些安全功能,比如阻止跟踪器、防止恶意软件等。2.自定义性强 Firefox的自定义性非常强,我们可以通过安装主题、插件等来改变Firefox的外观和...

火狐 求一些界面美化的插件
您好!Firefox 的主题能帮助您很好地定制 Firefox 的界面外观。一个主题可以简单地改变工具栏的背景颜色,改变按钮的样子,或者让 Firefox 看起来像一个完全不同的程序。点击 Firefox 窗口顶部的 Firefox 按钮,然后点击 附加组件 打开附加组件管理器。在附加组件管理器标签页中选择 获取附加组件 面板。要是...

怎么安装使用火狐浏览器?
最后点击确定。3. 第三步,返回文件夹页面后,再次右键点击Firefox-latest,在菜单中选择“以管理员身份权限运行”,点击之后会跳出用户账户控制对话框,点击是以确认允许更改。4. 第四步,进入火狐浏览器安装界面,点击左下角选项改变软件安装路径,在安装版本选择中因自身系统而异,比如64位系统就选择64...

火狐浏览器如何换皮肤\\窗口
火狐皮肤“Personas”,以其轻便易用的功能、绚丽多彩的皮肤让人眼前一亮,同类软件中无能出其右者!自 Mozilla实验室正式发布以来,就受到了众多火狐用户的火热追捧。火狐皮肤,一款换肤工具,究竟有什么样的魔力让你为之心动?30000余款火狐皮肤随心换 大部分浏览器仅由官方提供几款皮肤,你的口味受限于...

Firefox怎么改变网页js的内容?
其实很简单的,下面来看看具体的步骤吧:一、首先打开火狐浏览器 二、找到想要进行调试的网页 三、如果你的火狐浏览器没有安装调试器的话,需要进行安装,就是下面那个蜘蛛图标 四、调试器的安装过程:五、安装好调试器后,可以直接按F12,就会出现调试的界面 这样就可以了 ...

如何改变Firefox标题栏的字体颜色?用stylish可以实现吗?
用STYLISH是做不到的,STYLISH只能对网页内容重新组织。装PERSONAS扩展吧,相当于换肤功能

茄子河区17756881976: Chrome和firefox的滚动条颜色不兼容,应该怎么改 -
大庆脑安: 这种情况一般都得使用hack来保持兼容.火狐下的代码如下:@-moz-document url-prefix(http://),url-prefix(https://) { /* 滚动条颜色 */ scrollbar { -moz-appearance: none !important; background: rgb(0,255,0) !important; } /* 滚动条按钮颜色 */ thumb...

茄子河区17756881976: 是不是在FireFox下,不可以改变滚动条的颜色?
大庆脑安: 引用 5 楼 hurt75 的回复:什么叫 "自创滚动条可以系统滚动条目前不可以 "?请问什么叫自创滚动条?就是用div等东西模拟的滚动条.

茄子河区17756881976: 怎样改变浏览器窗口滑动条的颜色? -
大庆脑安: 代码如下:<style type="text/css"> body {scrollbar-face-color:#FEFAF1; (立体滚动条凸出部分的颜色) scrollbar-highlight-color:#FEFAF1; (滚动条空白部分的颜色) scrollbar-shadow-color:#FEFAF1; (立体滚动条阴影的颜色) scrollbar...

茄子河区17756881976: 如何实现改变滚动条的颜色 -
大庆脑安:与 之间加入: css实现的方法在CSS属性属性说明 scrollbar-3dlight-color滚动条亮边框颜色 scrollbar-arrow-color滚动条方向箭头的颜色 scrollbar-darkshadow-color滚动条下边和右边的边沿颜色 scrollbar-face-color滚动条3D表面的颜...

茄子河区17756881976: 如何修改网页中滚动条的颜色 -
大庆脑安: 请使用,类似下面的颜色代码试试: scrollbar-face-color:#0B5EB3; scrollbar-highlight-color:#0B5EB3; scrollbar-shadow-color:#0B5EB3; scrollbar-3dlight-color:#0B5EB3; scrollbar-arrow-color:#000000; scrollbar-track-color:#C6DBE7; scrollbar-darkshadow-color:#008000;

茄子河区17756881976: DIV怎么添加滚动条,怎么改变滚动条的颜色、. -
大庆脑安: scrollbar-face-color: #FFFFFF; '滚动条凸出部分的颜色 scrollbar-highlight-color: #FFFFFF;'滚动条空白部分的颜色 scrollbar-shadow-color: #FFFFFF;'立体滚动条阴影的颜色 scrollbar-3dlight-color: #FFFFFF; '滚动条亮边的颜色 scrollbar-...

茄子河区17756881976: 【高手来】网页中 ★横向★滚动条的颜色怎么变! -
大庆脑安: scrollbar-face-color:#F00;/*滚动条凸出部分的颜色(前景色),包括两端的方形按钮、水平或竖直滑动的滑块的颜色*/ scrollbar-track-color:#FFF;/*滚动条的背景颜色,如果省略的话将出现虚点,颜色将采用face-color的颜色*/ scrollbar-arrow-...

茄子河区17756881976: 网页里面的滚动条变成其它颜色怎么设置?
大庆脑安: &lt;style type="text/css"&gt; body {scrollbar-face-color:#FEFAF1; (立体滚动条凸出部分的颜色) scrollbar-highlight-color:#FEFAF1; (滚动条空白部分的颜色) scrollbar-shadow-color:#FEFAF1; (立体滚动条阴影的颜色) scrollbar-arrow-...

茄子河区17756881976: 怎么改网页内部的滚动条属性 -
大庆脑安: BODY { SCROLLBAR-FACE-COLOR: #eeeeee; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #efefef; SCROLLBAR-3DLIGHT-COLOR: #efefef; SCROLLBAR-ARROW-COLOR: #333333; SCROLLBAR-...

茄子河区17756881976: 如何在div+css中设置div的宽和高,同时让他横向和纵向出现滚动条,且滚动条的颜色改变? -
大庆脑安: <div id="abc"></div> 定义id为abc的这个div的CSS属性 在<head>下<style>#{width:100px;height:100px; overflow:scroll; }</style> overflow:scoll;的意思是总显示滚动条.滚动条的颜色,只有在IE浏览器才能显示出来.自己在color后面加颜色去...

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网