To truly go cross browser / platform, you *could* use a [custom cursor from a image url][1] to display context menu cursor however you'd like.

For example, you apply the following CSS Rule:

    cursor: url("https://i.stack.imgur.com/ygtZg.png"), auto;

Which looks like this:

>[![Custom Context Menu][2]][2]

Here's a [**Demo in jsFiddle**][3]

> **Note**: Even if you *can* solve any cross-platform rendering issues, you might want to consider [whether you *should* use the context-menu cursor][4].  It's is so rarely used that it may confuse users who see it, and context-menus themselves don't translate well to mobile deployments, which'll be a good chunk of most web-users.

**Further Reading**:

* [MDN - Cursor Property][5]
* [CSS Tricks - Using CSS Cursors][6]

[1]: https://stackoverflow.com/a/6623948/1366033
[2]: https://i.stack.imgur.com/ygtZg.png
[3]: https://jsfiddle.net/KyleMit/1L8dom1s/
[4]: https://ux.stackexchange.com/q/91307/34594
[5]: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
[6]: https://css-tricks.com/using-css-cursors/

[This page][1] says that IE9 and Opera 11.6 support the context-menu cursor on Windows, but I know Chrome, Safari and Firefox do not support the context-menu cursor on Windows, it just shows the regular arrow in those browsers.

I simply cannot understand why they wouldn't support that cursor. It would be immensely useful, especially when it's supported in those browsers on Mac.

It's purpose is for when you want the user to know that you've placed a special function on an element that will be activated when you engage the context-menu trigger over that element. For windows, that's a right-click. (most likely to bring up a custom context-menu)

Obviously, everything has a context menu on the web, you can right click anywhere on a page and the generic context menu will appear. This cursor though, is meant for when you place your own special function on an element that will be activated by right-click(and whatever Macs have - a context-menu key?)

Does anyone know why this isn't supported on Windows by those three browsers, but it is on Mac in those three browsers?


  [1]: http://www.browsersupport.net/CSS/cursor:context-menu

Why isn't `cursor:context-menu` supported by safari, chrome, or firefox on windows? But it is by IE9 and Opera?

Robert is correct that `<use>` is not always applied consistently.  Certainly when you use an SVG as an image, it doesn't know how to apply any of the CSS rules you've added to your page.

But there are a lot of other things here as well that could decide the element's style so an example might be helpful.

Here's a stack snippet to center our discussion.





    svg {
      fill: blue;
    }
    a:hover svg {
      fill: red;
    }
    .skip-link .icon {
      fill: purple;
    }

    .green {
      fill: green;
    }



    <a href="#" class="skip-link">
      <svg xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           class="icon" >

        <def>
          <text id="text" >use xlink</text>
          <text id="over" class="green">use xlink override</text>
        </def>
        
        <text x="5" y="15" >Plain</text>
        <use  x="5" y="30" xlink:href="#text" />

        <use  x="5" y="50" xlink:href="#over" />
        <text x="5" y="65" class="green" >class="green"</text>
        <text x="5" y="80" fill="orange" >fill="orange"</text>

      </svg>
    </a>



### Specificity

The SVG element itself is being styled with several conflicting rules. What determines which rule wins has to do with [specificity and order].  In this case, the SVG element itself will end up purple.  The hover anchor rule, for example, will never show up because it is less specific than `.skip-link .icon`

![SVG][2]

### Inheritance

Some properties allow for inheritance from their parents, but only when not specified themselves.  Any specifications will override the inherited value.  If the question is, my `<svg>` element has a certain style, why isn't it being applied to all child elements equally, the answer is simple.  It's perfectly fine for child elements to specify their own value and override the inherited one.

    <text x="5" y="65" style="fill:green;" >class="green"</text>
    <text x="5" y="80" fill="orange" >fill="orange"</text>

### Use & Xlink

The tricky part becomes what happens when use is involved.  In this case, it can be hard to trace the actual styles being applied.  Use will create an inline representation of the element identified by the `xlink` attribute, but you cannot access this element directly.  Therefore, selecting `use` in the developer tools will only reveal the styles applied to the parent of the element.  The element itself may override the inherited properties and we'd have no way of observing it in the dev panel.

Here, for example, the style applied to use is inherited from the parent.  In the developer tools, it appears that the winning rule is purple, but this is only because it hasn't taken into consideration the element being pulled in.  This is a *soft* value that can be overridden if the element specifies any value.

![use][3]

But the full set of selectors for the inlined text would actually look like this:

![text][4]

### Specific Situation

One thing I'd suggest in the future is **providing runnable code** that other people can use to easily reproduce the issue as it saves a lot of extra debugging time.  However, here's what I suspect is happening with your exact situation:





    svg {
      fill: #002649;
    }
    a:hover svg {
      fill: #8A8B8C;
    }
    .skip-link .icon {
      fill: #FFF;
    }



    <a href="#" class="skip-link">
      <svg xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           class="icon" >

        <def>
          <svg xmlns="http://www.w3.org/2000/svg" id="menu-bag">
            <rect height="100" width="100" />
          </svg>
        </def>

        <use xlink:href="#menu-bag" />

      </svg>
    </a>



[1]: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
[2]: http://i.imgur.com/5FPX0Rw.png
[3]: http://i.imgur.com/aheTEBt.png
[4]: http://i.imgur.com/VGsJ4Yv.png

I can't seem to figure out why Firefox is using the default svg fill color instead of the class's fill.

Here are the 3 fills when viewing the FF inspector: 

![CSS](http://i.stack.imgur.com/eeyKQ.png)

SVG is being inserted via

    <svg class="icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag"></use>
    </svg>

It should be showing the .skip-link .icon fill of white (#fff) but it's actually using the SVG fill of #002649; If i change .skip-link .icon to .skip-link svg then it works fine. Why can I not use a class and instead but explicitly state the element??

Am I missing something obvious about how Firefox fills an SVG? This CSS works fine in other browsers.

SVG Fill not being applied in FireFox

If I have the following SVG image for example:



<pre><code>&lt;svg <b>role="img"</b> viewbox="0 0 100 50" height="100px"&gt;
  <b>&lt;title&gt;Site Logo&lt;/title&gt;</b>
  &lt;rect x="0" y="00" width="100" height="10" fill="red"&gt;&lt;/rect&gt;
  &lt;rect x="0" y="10" width="100" height="10" fill="salmon"&gt;&lt;/rect&gt;
  &lt;rect x="0" y="20" width="100" height="10" fill="pink"&gt;&lt;/rect&gt;
  &lt;rect x="0" y="30" width="100" height="10" fill="aqua"&gt;&lt;/rect&gt;
  &lt;rect x="0" y="40" width="100" height="10" fill="blue"&gt;&lt;/rect&gt;
&lt;/svg&gt;</code></pre>

I should be hitting [a11y svg guidelines][1] by setting `role=img` and including a `<title>` element

However, when I run the [Accessibility Audit in Firefox][5], it adds a warning for every element/graphic inside the SVG (path, rect, circ) with the following warning:

> Content with images must be labeled. [Learn more][2]

<img src="https://i.stack.imgur.com/afDJ3.png" width="550" alt="Example warning" title="">

But surely I don't need to mark up every individual path within the svg?

What should I do to improve a11y or indicate to FF what the correct alt text is?

Here's a [demo page in fiddle that will reproduce this issue][3]

  [1]: https://www.deque.com/blog/creating-accessible-svgs/
  [2]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names
  [3]: https://jsfiddle.net/KyleMit/7wbvogue/
  [4]: https://i.stack.imgur.com/afDJ3.png
  [5]: https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector#Check_for_accessibility_issues