how to style the scrollbar of on iframe?

问题

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??

回答1:

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.

回答2:

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!

回答3:

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

回答4:

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

回答5:

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.

回答6:

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

来源：https://stackoverflow.com/questions/2280645/how-to-style-the-scrollbar-of-on-iframe

标签

css

iframe