Edge Customize Cursor Doesn't Work

The cursor does not turn on the edge

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):

Custom cursor image doesn't work in all IEs?

Unfortunately, cursor is plain buggy in IE, at least until and including 8

In Internet Explorer for Windows up to and including version 8, if a
relative URI value is specified in an external style sheet file the
base URI is considered to be the URI of the document containing the
element and not the URI of the style sheet in which the declaration
appears.

http://reference.sitepoint.com/css/cursor

You may want be able to use a conditional comment to target IE and then feed it a modified style rule with a different url.

Range Slider styling doesn't work on edge

Your "mistake" (if we can call it that) was giving the input a background. You want to give it background-color of transparent and give the -track the desired shade.

Also, as a minor side note and general rule, avoid using background instead of background-color. It is shorter, but it sets a bunch of other background- properties, which you normally don't care about but are a source of common bugs.

Since it tends to be repetitive, I wrote it in SCSS:

$input-height: 16px;
$track-height: 6px;
$thumb-bg: #33A2D9;
$track-bg: #d3d3d3;
@mixin slider-thumb {
  width: $input-height;
  height: $input-height;
  border-radius: $input-height/2;
  background-color: $thumb-bg;
  appearance: none;
}

@mixin slider-track {
  height: $track-height;
  border-radius: $track-height/2;
  background-color: $track-bg;
  appearance: none;
}

.slider[type=range] {
  -webkit-transition: .2s;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: $input-height;
  background-color: transparent;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
  cursor: pointer;
  &:hover, &:focus, &:active {
    opacity: 1;
  }
  &::-webkit-slider- {
    &runnable-track {
      -webkit-appearance: none;
      @include slider-track;
    }
    &thumb {
      -webkit-appearance: none;
      @include slider-thumb;
      margin-top: -($input-height - $track-height)/2;
    }
  }
  &::-moz-range- {
    &track {
      @include slider-track;
    }
    &thumb {
      @include slider-thumb;
      margin-top: 0;
    }
  }
  &::-ms- {
    &track {
      @include slider-track;
    }
    &fill-upper {
      @include slider-track;
    }
    &fill-lower {
      @include slider-track;
    }
    &thumb {
      @include slider-thumb;
      margin-top: 0;
    }
  }
}

Resulting in the following CSS:

.slider[type=range] {  -webkit-appearance: none;  -webkit-transition: .2s;  width: 100%;  height: 16px;  border-radius: 3px;  background-color: transparent;  outline: none;  opacity: 0.7;  transition: opacity .2s;  cursor: pointer;}
.slider[type=range]:hover, .slider[type=range]:focus, .slider[type=range]:active {  opacity: 1;}
.slider[type=range]::-webkit-slider-runnable-track {  height: 6px;  border-radius: 3px;  background-color: #d3d3d3;}
.slider[type=range]::-webkit-slider-thumb {  width: 16px;  height: 16px;  border-radius: 8px;  background-color: #33A2D9;  -webkit-appearance: none;  appearance: none;  margin-top: -5px;}
.slider[type=range]::-moz-range-track {  height: 6px;  border-radius: 3px;  background-color: #d3d3d3;}
.slider[type=range]::-moz-range-thumb {  width: 16px;  height: 16px;  border-radius: 8px;  background-color: #33A2D9;  margin-top: 0;}
.slider[type=range]::-ms-track {  height: 6px;  border-radius: 3px;  background-color: #d3d3d3;}
.slider[type=range]::-ms-fill-upper {  height: 6px;  border-radius: 3px;  background-color: #d3d3d3;}
.slider[type=range]::-ms-fill-lower {  height: 6px;  border-radius: 3px;  background-color: #d3d3d3;}
.slider[type=range]::-ms-thumb {  width: 16px;  height: 16px;  border-radius: 8px;  background-color: #33A2D9;  margin-top: 0;}

<input type=range class=slider>

Why is cursor:pointer effect in CSS not working

You need to change the z-index so that #firstdiv is considered on top of the other divs.

---

Related Topics