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

您的“错误” （如果可以这样称呼）正在为输入提供background。您想给它background-color中的transparent，并给-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样式在边缘上不起作用

1 个答案: