范围滑块样式在边缘不起作用

Question

我的 CSS 范围滑块样式在 Edge 上不起作用。我该如何解决问题？

我在网上搜索了解决方案。并添加了一些代码但仍然无法正常工作。

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%; 
  background: #33A2D9;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #33A2D9;
  cursor: pointer;
}
/*I added this to fix for edge but it doesn't work */
input[type=range]::-ms-thumb{
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background: #33A2D9 !important;
    cursor: pointer  !important;;
}
input[type=range]::-ms-fill-upper {
    border-radius: 5px !important;
    background: #d3d3d3 !important;
}
input[type=range]::-ms-fill-lower {
    border-radius: 5px !important;
    background: #d3d3d3 !important;
}

它应该是什么样子（例如在 Firefox 上）：

边缘的样子：

Answer 1

您的 "mistake"（如果我们可以这样称呼它的话）正在为输入提供 background。你想给它 transparent 的 background-color 并给 -track 想要的阴影。

此外，作为次要的旁注和一般规则，请避免使用 background 而不是 background-color。它更短，但它设置了一堆其他 background- 属性，您通常不关心这些属性，但却是常见错误的来源。

由于容易重复，写在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;
    }
  }
}

结果如下 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>

游乐场here.

范围滑块样式在边缘不起作用

Range Slider styling doesn't work on edge

css

microsoft-edge