CODEWITHSUNDEEP
cssiframe
manraj82
manraj82

Reputation: 6295

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

Upvotes: 18

Views: 55659

Answers (5)

Guffa
Guffa

Reputation: 700362

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.

Upvotes: 15

Jonny Haynes
Jonny Haynes

Reputation: 3186

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!

Upvotes: 3

DisgruntledGoat
DisgruntledGoat

Reputation: 72530

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.

Upvotes: 1

raveren
raveren

Reputation: 18541

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

Upvotes: 2

rahul
rahul

Reputation: 187050

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

Upvotes: 1

Related Questions