Search code examples
c#csswinformsregistrywebbrowser-control

C# WebBrowser CSS hover style not working (despite configuration of browser emulation)

Trying to work with WebBrowser control in a Winforms because I really want to use HTML5/CSS to style a GUI (happy to sink events in C#). But a hover style does not work.

So open a C# Winforms project and call it HoverNotWorking. Add a new HTML page called HTMLPage1.html and paste in following HTML

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a#clickMe:hover {
            background-color: #1A365B;
            color: white;
        }

        a#clickMe {
            background-color: #E0F1EA;
            color: #000000;
        }
    </style>
</head>
<body>
    <a id="clickMe">Click Me2</a>
</body>
</html>

Feel free to verify it works in an ordinary browser, does for me.

Go to the Form1 and add a WebBrowser control.

An attempted solution was to configure the browser emulation of WebBrowser (I had no idea this was possible, limited to versions of IE I'm afraid). So I placed this code in Main() so it looks like this (resolve the usings)

    [STAThread]
    static void Main()
    {
        // Make WebBrowser control emulate IE11
        // https://msdn.microsoft.com/en-us/library/ee330730(v=vs.85).aspx#BROWSER_EMULATION
        RegistryKey keyIeFeatureControl = Registry.LocalMachine.OpenSubKey(
                @"Software\Microsoft\Internet Explorer\Main\FeatureControl");
        RegistryKey keyIeFeatureBrowserEmulation = keyIeFeatureControl.OpenSubKey(
                "FEATURE_BROWSER_EMULATION", true);
        keyIeFeatureBrowserEmulation.SetValue(System.Reflection.Assembly.
            GetExecutingAssembly().GetName().Name, 69632); // 69632 = &h11000
        keyIeFeatureBrowserEmulation.Close();
        keyIeFeatureControl.Close();


        Application.EnableVisualStyles();
        Application.SetCompatibleTextRenderingDefault(false);
        Application.Run(new Form1());
    }

And in the Form1.cs file we need a little code to locate the HTMLPage1.html in the solutions top folder. Otherwise the code is plain ordinary.

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        Assembly myExe = System.Reflection.Assembly.GetExecutingAssembly();
        string filePath = Path.GetDirectoryName(new Uri(myExe.CodeBase).LocalPath);
        string myFile = System.IO.Path.Combine(filePath, @"..\..\HTMLPage1.html");

        if (File.Exists(myFile))
        {
            this.webBrowser1.Navigate(myFile);
        }
    }
}

But the hover CSS refuses to work. Now I'm sure I could an event handler to capture mouseover etc. but that's not the point. This should work. I have configured the browser control to use IE11, very modern version. This should work.

What am I missing?

Solution

  • I've made what you depicted. Everything worked out after I substituted 69632 with 11000 and got the correct name of the program process this way:

    var fileName = System.IO.Path.GetFileName(System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName);

    So that setting the parameter is:

    keyIeFeatureBrowserEmulation.SetValue(fileName, 11000);