how to style the scrollbar of on iframe?

Question

Is it possible to change the style of the scrollbars of on iframe?

i tried to style it by using the following code but it doesnt seem to work

html{scrollbar-arrow-color: #252604;
 scrollbar-highlight-color: #BFC097;
 scrollbar-shadow-color: #ffffff;
 scrollbar-base-color : #000000;
 scrollbar-track-color: #E2E1D4;
 scrollbar-face-color: #BFC097;
 scrollbar-3dlight-color: #EFEEEE;
 scrollbar-darkshadow-color: #999999;}

and tried

body{scrollbar-arrow-color: #252604;
 scrollbar-highlight-color: #BFC097;
 scrollbar-shadow-color: #ffffff;
 scrollbar-base-color : #000000;
 scrollbar-track-color: #E2E1D4;
 scrollbar-face-color: #BFC097;
 scrollbar-3dlight-color: #EFEEEE;
 scrollbar-darkshadow-color: #999999;}

Have I got it wrong? just one more thing the file in the iframe is in a different domain? i have had experiences where javascript didnt work but will it affect CSS as well??

Answer 1

You need to add the CSS to the actual page in the iframe, i.e. if you have page.html and iframe.html then the CSS must be in iframe.html.

However, don't rely on that CSS, it only works in IE, or Opera under quirks mode.

Answer 2

There is no cross-browser way to style the scrollbars.

The code that you have only works in Internet Explorer, and only in quirks (non-standard) mode.

What you have in the iframe is isolated from the main page, you have to style the scrollbars on the page where they appear, i.e. in the page that you load in the iframe. Any styling that you apply to the main page does not affect what's in the iframe.

If you can't change the content of the page that you load in the iframe, it's not possible to style it's scrollbars.

Answer 3

Just lose the iframe or any way of styling scrollbars, it's just not done.

Answer 4

AFAIK, you can't do this in a cross browser way. I think the code you have used above will work in IE only.

Answer 5

Using javascript (i.e. jScrollPane) is the only cross-browser option of styling scrollbars, I'm afraid.

Answer 6

Try iframe body, not just body.

This will work perfectly in Webkit browsers(Safari & Chrome), don't think there'll be a cross browser solution. Well - you could with Javascript!