html frame滚动条,如何修改 iframe 滚动条样式

项目中用到了 iframe，由于显示效果，想要修改一下滚动条样式，通过修改 css 样式在 chrome 下无效，而在 safari 中显示正常，不知道什么原因，求大佬们指点

写了个测试代码：

index.html：

Document

* {

margin: 0;

padding: 0;

}

/*- scrollbar -*/

::-webkit-scrollbar {

width: 5px;

height: 5px;

}

::-webkit-scrollbar-thumb{

background-color: #999;

-webkit-border-radius: 5px;

border-radius: 5px;

}

::-webkit-scrollbar-thumb:vertical:hover{

background-color: #666;

}

::-webkit-scrollbar-thumb:vertical:active{

background-color: #333;

}

::-webkit-scrollbar-button{

display: none;

}

::-webkit-scrollbar-track{

background-color: #f1f1f1;

}

/*- scrollbar -*/

body, html, #iframe {

width: 640px;

height: 100%;

margin: 0 auto;

}

inner.html：

innerHtml

* {

margin: 0;

padding: 0;

}

.innerDiv {

width: 100%;

height: 2000px;

background-color: #ccc;

}

附上效果截图：

Chrome：

Safari：

chrome 下 iframe 滚动条样式与 body 滚动条样式不同，而 safari 下 iframe 滚动条样式和 body 滚动条样式皆正常。求大佬们指点