Change Scroll Bar Color In FireFox and Opera?

How Is This Done?

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

39 Replies - 411269 Views - Last Post: 18 June 2012 - 09:46 AM

#1 getlowdogg369  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 23
  • Joined: 26-December 05

Change Scroll Bar Color In FireFox and Opera?

Post icon  Posted 22 April 2006 - 12:00 PM

Hello everyone. I am using the folowing CSS code to change the color of the Scroll Bar.
BODY{scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#FF9900; scrollbar-darkshadow-color:#333333; scrollbar-face-color:#FF9900; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#000000; } 

How do I make it so it changes the color of the Scroll Bar in FireFox and Opera also? Thanks!

~ Jason

This post has been edited by getlowdogg369: 22 April 2006 - 12:02 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Change Scroll Bar Color In FireFox and Opera?

#2 sontek  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 283
  • Joined: 13-September 01

Re: Change Scroll Bar Color In FireFox and Opera?

Posted 22 April 2006 - 12:30 PM

Firefox doesn't support that because changing the browser is messing with the clients preferences and shouldn't be a 'style' setting. But you can do it with javascript if you really need it, But remember some people are visually impaired and have specific settings for their GUI and you'll be messing with it.
Was This Post Helpful? 0
  • +
  • -

#6 getlowdogg369  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 23
  • Joined: 26-December 05

Re: Change Scroll Bar Color In FireFox and Opera?

Posted 22 April 2006 - 12:34 PM

How would I do it with Javascript? Can you please provide me with a code? Thanks!

~ Jason
Was This Post Helpful? 1

#7 44corners  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 243
  • Joined: 22-February 06

Re: Change Scroll Bar Color In FireFox and Opera?

Posted 22 April 2006 - 12:37 PM

I had a quick google and apparently

Quote

One important thing you must know about a colored scrollbar is that it does not do not work in Gecko-based browsers (Firefox, Netscape Navigator, Mozilla): It is an Internet Explorer's only property. It is not a standard property or a proprietary property. According to W3C, these properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-").


From here

This post has been edited by danielle_1_uk: 22 April 2006 - 12:38 PM

Was This Post Helpful? 0
  • +
  • -

#8 getlowdogg369  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 23
  • Joined: 26-December 05

Re: Change Scroll Bar Color In FireFox and Opera?

Posted 22 April 2006 - 12:51 PM

This is not telling me how to change the Scroll Bars in FireFox...
Was This Post Helpful? 1

#9 44corners  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 243
  • Joined: 22-February 06

Re: Change Scroll Bar Color In FireFox and Opera?

Posted 22 April 2006 - 01:03 PM

getlowdogg369, on 22 Apr, 2006 - 07:43 PM, said:

This is not telling me how to change the Scroll Bars in FireFox...

As far as I know you can't. I thought even the Javascript way only allows you to do it in IE 5.5+. I am probably wrong on this, so I would wait for a Javascripter's opinion.

EDIT: all I know is you can't do it with html/css. And the html you've written to allow it in IE wont validate either.

This post has been edited by danielle_1_uk: 22 April 2006 - 01:06 PM

Was This Post Helpful? 0
  • +
  • -

#10 getlowdogg369  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 23
  • Joined: 26-December 05

Re: Change Scroll Bar Color In FireFox and Opera?

Posted 22 April 2006 - 01:39 PM

Ok. So sontek, so you know how?
Was This Post Helpful? 0
  • +
  • -

#11 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Change Scroll Bar Color In FireFox and Opera?

Posted 23 April 2006 - 02:34 AM

CSS scrollbar properties are proprietary standards of Microsoft and thus will only work in Internet Explorer. The best you can do is to create a simulated scrollbar that serves the same purpose; you can't alter the real scrollbar styles in Firefox.

It's unfortunate though. I'm all for standards but that's one of the few MS proprietary codes that doesn't hurt anything while adding a little spice to the design.
Was This Post Helpful? 0
  • +
  • -

#20 masada  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 4
  • Joined: 09-May 06

Re: Change Scroll Bar Color In FireFox and Opera?

Posted 09 May 2006 - 01:40 PM

give this a shot:
Cross-Browser Custom Scrollbar
Was This Post Helpful? 1

#21 masada  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 4
  • Joined: 09-May 06

Re: Change Scroll Bar Color In FireFox and Opera?

Posted 10 May 2006 - 01:00 PM

Cancel that last entry. That thing is a joke.
Here's what you can do to make this work in all 3 major browsers (IE, Firefox, Opera):

1) use this code:

<style>
body{
    scrollbar-face-color: #808080; /*/ obviously change this to whatever you want /*/
    scrollbar-arrow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFBF0;
    scrollbar-3dlight-color: #808080;
    scrollbar-shadow-color: #FFFBF0;
    scrollbar-darkshadow-color: #808080;
    scrollbar-track-color: #CCCCCC;
}
</style>
<script>
function selectCode(f){
document.forms[f].elements[0].focus();
document.forms[f].elements[0].select();
}
function changeScrollbarColor(C){
  if (document.all){
    document.body.style.scrollbarBaseColor = C
  }   
}
</script>



2) in the HTML tag of your webpage, delete ANY and ALL ties to W3C! For example, you will see code generated in the HTML tag when you create a new html page in Dreamweaver like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">



Kill all of this so the only thing left is the following:

<html>



Near as I can tell, what this does is break away from the rules that have been established by the W3 consortium so anything can be read and followed. I don't know why, but it just seems to work. I have tried this script method in all three browsers and it works in all of them.


cheers
Was This Post Helpful? 1

#22 MIP  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 2
  • Joined: 12-November 06

Re: Change Scroll Bar Color In FireFox and Opera?

Posted 12 November 2006 - 11:48 AM

View Postmasada, on 10 May, 2006 - 01:00 PM, said:

Cancel that last entry. That thing is a joke.
Here's what you can do to make this work in all 3 major browsers (IE, Firefox, Opera):

1) use this code:

<style>
body{
    scrollbar-face-color: #808080; /*/ obviously change this to whatever you want /*/
    scrollbar-arrow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFBF0;
    scrollbar-3dlight-color: #808080;
    scrollbar-shadow-color: #FFFBF0;
    scrollbar-darkshadow-color: #808080;
    scrollbar-track-color: #CCCCCC;
}
</style>
<script>
function selectCode(f){
document.forms[f].elements[0].focus();
document.forms[f].elements[0].select();
}
function changeScrollbarColor(C){
  if (document.all){
    document.body.style.scrollbarBaseColor = C
  }   
}
</script>



2) in the HTML tag of your webpage, delete ANY and ALL ties to W3C! For example, you will see code generated in the HTML tag when you create a new html page in Dreamweaver like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">



Kill all of this so the only thing left is the following:

<html>



Near as I can tell, what this does is break away from the rules that have been established by the W3 consortium so anything can be read and followed. I don't know why, but it just seems to work. I have tried this script method in all three browsers and it works in all of them.


cheers

Was This Post Helpful? 1

#26 MIP  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 2
  • Joined: 12-November 06

Re: Change Scroll Bar Color In FireFox and Opera?

Posted 12 November 2006 - 11:55 AM

Near as I can tell this does not work in Mozilla. I pasted the code by Masada into a new blank page, set an onload event onload="changeScrollbarColor() to set scroll bar to "black" in the body of the new page and previewed in Mozilla (version 2.0) browser. Same old "light blue" scrollbar. Tested it in version 1.0.5.8 and same thing. Here is the "code" i tried for the new page:

<html>
<head>
<title>New Page 4</title>
<style>
body{
scrollbar-face-color: #000000; /*/ obviously change this to whatever you want /*/
scrollbar-arrow-color: #FFFFFF;
scrollbar-highlight-color: #FFFBF0;
scrollbar-3dlight-color: #808080;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #808080;
scrollbar-track-color: #cccccc;
}
</style>
<script>
function selectCode(f){
document.forms[f].elements[0].focus();
document.forms[f].elements[0].select();
}
function changeScrollbarColor©{
if (document.all){
document.body.style.scrollbarBaseColor = C
}
}
</script>
</head>
<body onload="changeScrollbarColor()">
</body>
</html>

It seems this stuff about reference to W3C is just not correct and that Mozilla refuses to recognize anything which messes with their browser.



View Postmasada, on 10 May, 2006 - 01:00 PM, said:

Cancel that last entry. That thing is a joke.
Here's what you can do to make this work in all 3 major browsers (IE, Firefox, Opera):

1) use this code:

<style>
body{
    scrollbar-face-color: #808080; /*/ obviously change this to whatever you want /*/
    scrollbar-arrow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFBF0;
    scrollbar-3dlight-color: #808080;
    scrollbar-shadow-color: #FFFBF0;
    scrollbar-darkshadow-color: #808080;
    scrollbar-track-color: #CCCCCC;
}
</style>
<script>
function selectCode(f){
document.forms[f].elements[0].focus();
document.forms[f].elements[0].select();
}
function changeScrollbarColor(C){
  if (document.all){
    document.body.style.scrollbarBaseColor = C
  }   
}
</script>



2) in the HTML tag of your webpage, delete ANY and ALL ties to W3C! For example, you will see code generated in the HTML tag when you create a new html page in Dreamweaver like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">



Kill all of this so the only thing left is the following:

<html>



Near as I can tell, what this does is break away from the rules that have been established by the W3 consortium so anything can be read and followed. I don't know why, but it just seems to work. I have tried this script method in all three browsers and it works in all of them.


cheers

Was This Post Helpful? 1

#27 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Change Scroll Bar Color In FireFox and Opera?

Posted 16 November 2006 - 10:43 PM

The only reason to kill the W3C document type declaration is to force the page to display in backward-compatibility (quirks) mode. I’m scratching my head for why you would do that though. It’s not going to make Microsoft’s scroll-bar properties work in Firefox, which simply doesn’t support them. And I believe that while Opera has this capability, it’s turned off by default; quirks mode isn’t going to help you there either.
Was This Post Helpful? 0
  • +
  • -

#28 masada  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 4
  • Joined: 09-May 06

Re: Change Scroll Bar Color In FireFox and Opera?

Posted 21 November 2006 - 02:50 PM

View PostArbitrator, on 17 Nov, 2006 - 12:43 AM, said:

The only reason to kill the W3C document type declaration is to force the page to display in backward-compatibility (quirks) mode. I’m scratching my head for why you would do that though. It’s not going to make Microsoft’s scroll-bar properties work in Firefox, which simply doesn’t support them. And I believe that while Opera has this capability, it’s turned off by default; quirks mode isn’t going to help you there either.



The only reason why I do that is so one can manipulate the color of the scrollbar. It works for me.
Give it a go.
Was This Post Helpful? 0
  • +
  • -

#29 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Change Scroll Bar Color In FireFox and Opera?

Posted 21 November 2006 - 06:48 PM

View Postmasada, on 21 Nov, 2006 - 02:50 PM, said:

The only reason why I do that is so one can manipulate the color of the scrollbar. It works for me.
Give it a go.
Okay, I now understand why you need quirks mode for your example. It’s because the scroll‐bar properties only work when applied to the html element, except in quirks mode; since your code styles the body element, you need quirks mode for it to work. Oddly enough, Opera, which has an option that enables styling of the scroll‐bar, seems to only allow you to actually style it if the page is displayed in quirks mode. I can’t find any evidence behind your assertion that you are able to style the scroll‐bars of Firefox with the above code, however.

The code featured above is also confusing since the HTML is missing and CSS and Javascript tend to be meaningless without the structure that they apply to. Apparently, you must choose between the seven independent scroll‐bar properties and the scrollbar-base-color property since they serve two exclusive functions, which explains the changeScrollbarColor() function. The selectCode() function still remains a mystery. In any case, I don’t think it’s worth dealing with the compatibility problems caused by rendering one’s page in quirks mode. Here’s a working example that utilizes standards-compliance mode, though it only works in Internet Explorer. The excessive text is to induce the appearance of a scroll‐bar.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="la">
  <head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="Author" content="Patrick Garies">

	<title>DIC 15885</title>

	<style type="text/css">
	  * { margin: 0;}
	  html {
		scrollbar-face-color: gray;
		scrollbar-arrow-color: white;
		scrollbar-highlight-color: #fffbf0;
		scrollbar-3dlight-color: gray;
		scrollbar-shadow-color: #fffbf0;
		scrollbar-darkshadow-color: gray;
		scrollbar-track-color: #ccc;
		padding: 2em;
		}
	  input {
		width: 8em;
		margin-right: 0.5em;
		}
	  p { margin: 1em 0; }
	  p:first-child { margin-top: 0; }
	  p:last-child { margin-bottom: 0; }
	</style>

	<script type="text/javascript">
	  function changeBaseColor() {
		var html = document.getElementsByTagName("html")[0];
		var input = document.getElementsByTagName("input")[0];
		html.style.scrollbarBaseColor = input.value;
		}
	</script>

  </head>
  <body>

	<form action="java script:changeBaseColor();">
	  <fieldset>
		<legend>Change Scroll‐Bar Color</legend>
		<label>Color: 
		  <input type="text">
		</label>
		<button type="submit">Submit</button>
	  </fieldset>
	</form>
	

	<p>Eademque ratione ne temperantiam quidem propter se expetendam esse dicemus, sed quia pacem animis afferat et eos quasi concordia quadam placet ac leniat. temperantia est enim, quae in rebus aut expetendis aut fugiendis ut rationem sequamur monet. nec enim satis est iudicare quid faciendum non faciendumve sit, sed stare etiam oportet in eo, quod sit iudicatum. plerique autem, quod tenere atque servare id, quod ipsi statuerunt, non possunt, victi et debilitati obiecta specie voluptatis tradunt se libidinibus constringendos nec quid eventurum sit provident ob eamque causam propter voluptatem et parvam et non necessariam et quae vel aliter pararetur et qua etiam carere possent sine dolore tum in morbos gravis, tum in damna, tum in dedecora incurrunt, saepe etiam legum iudiciorumque poenis obligantur. Qui autem ita frui volunt voluptatibus, ut nulli propter eas consequantur dolores, et qui suum iudicium retinent, ne voluptate victi faciant id, quod sentiant non esse faciendum, ii voluptatem maximam adipiscuntur praetermittenda voluptate. idem etiam dolorem saepe perpetiuntur, ne, si id non faciant, incidant in maiorem. ex quo intellegitur nec intemperantiam propter se esse fugiendam temperantiamque expetendam, non quia voluptates fugiat, sed quia maiores consequatur.</p>

	<p>Eadem fortitudinis ratio reperietur. nam neque laborum perfunctio neque perpessio dolorum per se ipsa allicit nec patientia nec assiduitas nec vigiliae nec ea ipsa, quae laudatur, industria, ne fortitudo quidem, sed ista sequimur, ut sine cura metuque vivamus animumque et corpus, quantum efficere possimus, molestia liberemus. ut enim mortis metu omnis quietae vitae status perturbatur, et ut succumbere doloribus eosque humili animo inbecilloque ferre miserum est, ob eamque debilitatem animi multi parentes, multi amicos, non nulli patriam, plerique autem se ipsos penitus perdiderunt, sic robustus animus et excelsus omni est liber cura et angore, cum et mortem contemnit, qua qui affecti sunt in eadem causa sunt, qua ante quam nati, et ad dolores ita paratus est, ut meminerit maximos morte finiri, parvos multa habere intervalla requietis, mediocrium nos esse dominos, ut, si tolerabiles sint, feramus, si minus, animo aequo e vita, cum ea non placeat, tamquam e theatro exeamus. quibus rebus intellegitur nec timiditatem ignaviamque vituperari nec fortitudinem patientiamque laudari suo nomine, sed illas reici, quia dolorem pariant, has optari, quia voluptatem.</p>

	<p>Iustitia restat, ut de omni virtute sit dictum. sed similia fere dici possunt. ut enim sapientiam, temperantiam, fortitudinem copulatas esse docui cum voluptate, ut ab ea nullo modo nec divelli nec distrahi possint, sic de iustitia iudicandum est, quae non modo numquam nocet cuiquam, sed contra semper afficit cum vi sua atque natura, quod tranquillat animos, tum spe nihil earum rerum defuturum, quas natura non depravata desiderat. [et] quem ad modum temeritas et libido et ignavia semper animum excruciant et semper sollicitant turbulentaeque sunt, sic [inprobitas si] cuius in mente consedit, hoc ipso, quod adest, turbulenta est; si vero molita quippiam est, quamvis occulte fecerit, numquam tamen id confidet fore semper occultum. plerumque improborum facta primo suspicio insequitur, dein sermo atque fama, tum accusator, tum iudex; Multi etiam, ut te consule, ipsi se indicaverunt. quodsi qui satis sibi contra hominum conscientiam saepti esse et muniti videntur, deorum tamen horrent easque ipsas sollicitudines, quibus eorum animi noctesque diesque exeduntur, a diis inmortalibus supplicii causa importari putant. quae autem tanta ex improbis factis ad minuendas vitae molestias accessio potest fieri, quanta ad augendas, cum conscientia factorum, tum poena legum odioque civium? et tamen in quibusdam neque pecuniae modus est neque honoris neque imperii nec libidinum nec epularum nec reliquarum cupiditatum, quas nulla praeda umquam improbe parta minuit, [sed] potius inflammat, ut coercendi magis quam dedocendi esse videantur.</p>

	<p>Invitat igitur vera ratio bene sanos ad iustitiam, aequitatem, fidem, neque homini infanti aut inpotenti iniuste facta conducunt, qui nec facile efficere possit, quod conetur, nec optinere, si effecerit, et opes vel fortunae vel ingenii liberalitati magis conveniunt, qua qui utuntur, benivolentiam sibi conciliant et, quod aptissimum est ad quiete vivendum, caritatem, praesertim cum omnino nulla sit causa peccandi. Quae enim cupiditates a natura proficiscuntur, facile explentur sine ulla iniuria, quae autem inanes sunt, iis parendum non est. nihil enim desiderabile concupiscunt, plusque in ipsa iniuria detrimenti est quam in iis rebus emolumenti, quae pariuntur iniuria. Itaque ne iustitiam quidem recte quis dixerit per se ipsam optabilem, sed quia iucunditatis vel plurimum afferat. nam diligi et carum esse iucundum est propterea, quia tutiorem vitam et voluptatem pleniorem efficit. itaque non ob ea solum incommoda, quae eveniunt inprobis, fugiendam inprobitatem putamus, sed multo etiam magis, quod, cuius in animo versatur, numquam sinit eum respirare, numquam adquiescere.</p>

	<p>Quodsi ne ipsarum quidem virtutum laus, in qua maxime ceterorum philosophorum exultat oratio, reperire exitum potest, nisi derigatur ad voluptatem, voluptas autem est sola, quae nos vocet ad se et alliciat suapte natura, non potest esse dubium, quin id sit summum atque extremum bonorum omnium, beateque vivere nihil aliud sit nisi cum voluptate vivere.</p>

	<p>Huic certae stabilique sententiae quae sint coniuncta explicabo brevi. nullus in ipsis error est finibus bonorum et malorum, id est in voluptate aut in dolore, sed in his rebus peccant, cum e quibus haec efficiantur ignorant. animi autem voluptates et dolores nasci fatemur e corporis voluptatibus et doloribus — itaque concedo, quod modo dicebas, cadere causa, si qui e nostris aliter existimant, quos quidem video esse multos, sed imperitos —, quamquam autem et laetitiam nobis voluptas animi et molestiam dolor afferat, eorum tamen utrumque et ortum esse e corpore et ad corpus referri, nec ob eam causam non multo maiores esse et voluptates et dolores animi quam corporis. nam corpore nihil nisi praesens et quod adest sentire possumus, animo autem et praeterita et futura. ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. quod idem licet transferre in voluptatem, ut ea maior sit, si nihil tale metuamus. Iam illud quidem perspicuum est, maximam animi aut voluptatem aut molestiam plus aut ad beatam aut ad miseram vitam afferre momenti quam eorum utrumvis, si aeque diu sit in corpore. Non placet autem detracta voluptate aegritudinem statim consequi, nisi in voluptatis locum dolor forte successerit, at contra gaudere nosmet omittendis doloribus, etiamsi voluptas ea, quae sensum moveat, nulla successerit, eoque intellegi potest quanta voluptas sit non dolere. Sed ut iis bonis erigimur, quae expectamus, sic laetamur iis, quae recordamur. stulti autem malorum memoria torquentur, sapientes bona praeterita grata recordatione renovata delectant. est autem situm in nobis ut et adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. sed cum ea, quae praeterierunt, acri animo et attento intuemur, tum fit ut aegritudo sequatur, si illa mala sint, laetitia, si bona.</p>

  </body>
</html>

Was This Post Helpful? 0
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3