Scrollbar Color For Iframes

[magicz69]

How do i change the scrollbar color of iframe ? i tried putting this on the main page and the source page but the scrollbard color still did nt change ..

<style type="text/css">
body
{
scrollbar-face-color:#FEEECC;
scrollbar-arrow-color:black;
scrollbar-track-color:#FEEECC;
scrollbar-shadow-color:#FEEECC;
scrollbar-highlight-color:#FEEECC;
scrollbar-3dlight-color:#FEEECC;
scrollbar-darkshadow-Color:#FEEECC;
background: transparent;
overflow: hidden;
border:none;
margin:0;
}
</style>

[sice]

just a few things to check:

1. colored scrollbars only work in IE
2. make sure you didnt set your doctype to xhtml
3. im not sure if an html 4.01 STRICT doctype will allow it, so if youre using that, try setting it to transitional.

hope that helps.

[Carl-cox-]

try putting

<style type="text/css">
.iframe
{
scrollbar-face-color:#FEEECC;
scrollbar-arrow-color:black;
scrollbar-track-color:#FEEECC;
scrollbar-shadow-color:#FEEECC;
scrollbar-highlight-color:#FEEECC;
scrollbar-3dlight-color:#FEEECC;
scrollbar-darkshadow-Color:#FEEECC;
background: transparent;
overflow: hidden;
border:none;
margin:0;
}
</style>


Then in your iframe tag put

<iframe class="iframe"></iframe>

i think thats how its done :/

[magicz69]

still cant funny ...

[OuTpaTienT]

Maybe that's a sign from above that you shouldn't do it. Personally I don't like it when web sites try to change my scrollbar colors. It's annoying and I usually do not bookmark such web sites.

[magicz69]

but matching the background will look cool :P espicially for iframes :P i'll go look for solutions den

[raggario]

You can put that css code onto the pages that get loaded into the iframe, then the iframe itself will appear to have the colored scrollbars, but it will really be the pages that get loaded that have the code and the coloring.

I found this thread though because I was searching for "doctype scrollbar color" in google. As mentioned above - different browsers don't allow scrollbar coloring, plus every time I try to use a doctype on a page that has scrollbar coloring the code won't work anymore..

Is there a proper doctype to use if you want to use the scrollbar coloring? Which doctype will not "break" that css code?

[Tryezz]

<style type="text/css">
*<!--*
body
{
scrollbar-face-color:#FEEECC;
scrollbar-arrow-color:black;
scrollbar-track-color:#FEEECC;
scrollbar-shadow-color:#FEEECC;
scrollbar-highlight-color:#FEEECC;
scrollbar-3dlight-color:#FEEECC;
scrollbar-darkshadow-Color:#FEEECC;
background: transparent;
overflow: hidden;
border:none;
margin:0;
}
*-->*
</style>

The parts in the astrieks are the parts you need. That blocks off the code and makes it register.

"But hey, don't take my word for it"-The guy from reading rainbow

[raggario]

Tryezz, I should have been more specific in what I was looking for.

I had already been using similar code to what you had posted and that worked just fine for me, that is it worked fine on all pages that did not have the "xhtml" doctype. On my xhtml doctype pages, the scrollbar color code was no longer working.

I've been searching around though, and have just found the answer to what I was looking for. I will share my results with everyone here, and by the way these results were found at the forums on Devshed Right Here.

Quote:

Originally Posted by rsi on Devshed

In xhtml (standards mode ie), the scrollbar object is not part of the body element anymore...but the of the html element.

so:

html {
scrollbar-face-color: #96A096;
scrollbar-shadow-color: #96A096;
scrollbar-highlight-color: #96A096;
scrollbar-3dlight-color: #9AB6C4;
scrollbar-darkshadow-color: #20253A;
scrollbar-track-color: #738278;
scrollbar-arrow-color: #000000;
}

...works fine !

And right in the same thread:

Quote:

Originally Posted by Tuxie on Devshed

I quote W3C:

Quote:

So,you shouldnt be using colored scrollbars at all,especially if you are using XHTML because its invalid XHTML.

[peejay]

raggario

i came across this post from google.. just wanted to say thanks for posting your solution and the info behind it.