Search code examples
csscursormicrosoft-edge

The cursor does not turn on the edge

Good evening guys, I added these lines of css code to my site, turns the cursor into an image, works on any browser except on the edge. What could be my problem, did I do something wrong?

  #arr-left{
    position:relative;
    cursor: url('http://mysito/wp-content/uploads/2020/03/left-arrow.png') ,auto;   
    }
Solution

  • As far as I know, both the IE and the legacy version of Microsoft Edge are only supporting the .cur files in the cursor url property. Since the New Microsoft Edge is Chromium based, both the New Microsoft Edge and Chrome browser will support the .png type file and the .cur type file. You could check these similar threads: Edge customize cursor doesn't work and Custom Cursor on Microsoft Edge has an Offset

    As a workaround, I suggest you change the image format from the .png file to the .cur file. You could use Google or Bing to search ".cur editor", then, convert the .png file to a .cur file.

    Besides, I have created a sample to test it. The .cur file works well in IE 11 ,the legacy version of Microsoft Edge, the New Microsoft Edge and Chrome browser. You could check it:

    <style>

    #arr-left {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
        #arr-left {
            cursor: url('http://cur.cursors-4u.net/others/oth-7/oth697.cur'),auto;
        }
    }

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        /* IE10+ CSS styles go here */
        #arr-left {
            /*cursor: url('http://cur.cursors-4u.net/others/oth-7/oth697.cur'), pointer;*/
            cursor:url("Images/left-arrow.cur"), auto;
        }
    }

    @supports (-ms-ime-align:auto) {
        /* Edge 16+ CSS */
        #arr-left {
            /*cursor: url('http://cur.cursors-4u.net/others/oth-7/oth697.cur'), pointer;*/
            cursor: url("Images/left-arrow.cur"), auto;
        }
    }
</style>
<div id="arr-left">
    content
</div>

    The screenshot on my local side as below (using IE 11 and Microsoft Edge 44.18362.449.0):

    enter image description here