How to Change the Color of the Scrollbar for Microsoft Edge

Support for scroll bar styling in Edge Browser

It's hard to know specifically, without official documentation, clear indications, or official word from the dev team, but it seems unlikely based on previous comments about the purpose and design goals of Edge.

Here's why I say that:

The properties you're referring to were originally added to IE8 as extensions to the CSS 2.1 specification. These properties are non-standard and considered illegal in some circles. (There are other non-standard variations, though it's unclear whether they're supported in MS Edge.)

What is clear is that these particular properties may not be formally supported in Edge, presumably because they are proprietary extensions.

This seems unlikely to change, since one of the major design points of MS Edge is to set aside legacy compatibility in favor of standards and cross platform interoperability. (And, given that major functionality changes were made to IE11 without changing the major or minor version number, it's entirely feasible that support for non-standard properties may disappear after any given update.)

The fact that these properties work in the build you're using may be a deliberate design decision or it may be a side effect from the fact that Edge is based on a fork of the Trident engine, one where many lines of legacy code have been removed.

Again, without official confirmation or announcement, this is all speculation based on experience and previous team behavior. Your mileage may vary.

Hope this helps...

-- Lance

How to change the scrollbar color using css

You can use the following attributes for webkit, which reach into the shadow DOM:

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

Here's a working fiddle with a red scrollbar, based on code from this page explaining the issues.

http://jsfiddle.net/hmartiro/Xck2A/1/

Using this and your solution, you can handle all browsers except Firefox, which at this point I think still requires a javascript solution.

Changing the color of the web browser controls scrollbar

You can use IHTMLDocument2.styleSheets to set styleSheets:

IHTMLDocument2 _htmlDocument = webBrowser.Document.DomDocument as IHTMLDocument2;
int length = _htmlDocument.styleSheets.length;
IHTMLStyleSheet styleSheet = _htmlDocument.createStyleSheet(@"", length + 1);
styleSheet.addRule("BODY", "scrollbar-face-color: #FF0000;");
styleSheet.addRule("BODY", "scrollbar-highlight-color: #FF00FF;");
styleSheet.addRule...

or you can set CSS directly in HTML code:

CSS:

<STYLE type="text/css">
<!--
BODY
{
scrollbar-face-color: #FF0000;
scrollbar-highlight-color: #FF00FF;
scrollbar-3dlight-color: #00FF00;
scrollbar-darkshadow-color: #00FFFF;
scrollbar-shadow-color: #0000FF;
scrollbar-arrow-color: #FF00FF;
scrollbar-track-color: #FFFF00;
}
-->
</STYLE>

and in your C# code set WebBrowser.DocumentText property:

webBrowser.DocumentText = "<html><head><STYLE type=\"text/css\"><!--BODY{scrollbar-face-color: #FF0000;scrollbar-highlight-color: #FF00FF;scrollbar-3dlight-color: #00FF00;scrollbar-darkshadow-color: #00FFFF;scrollbar-shadow-color: #0000FF;scrollbar-arrow-color: #FF00FF;scrollbar-track-color: #FFFF00;}--></STYLE></head><body>aaaa</body></html>";

note that: You can only see the coloured scrollbar if you run IE 5.5.

How to Set Scrollbar theme in XAML webview?

Unfortunately this isn't possible since the WebView is based off of Edge and Edge doesn't currently support it, as you can see here. If Edge gets this feature, you could simply insert a STYLE into your head element to define the color.

How to Change the Color of the Scrollbar for Microsoft Edge

Support for scroll bar styling in Edge Browser

How to change the scrollbar color using css

Changing the color of the web browser controls scrollbar

How to Set Scrollbar theme in XAML webview?

Related Topics

Leave a reply