javascript - 如何将自定义样式应用于不同浏览器的输入类型范围的 HTML 元素？

Question

我想实现这个设计，我希望拇指左右有不同的颜色，而且拇指应该像一个空心圆圈，在搜索答案后我发现它对于 Firefox 和 IE 来说真的很简单，但我不能为 Chrome 和 Edge 做同样的事情。

::-moz-range-progress 和 ::-moz-range-track

而且 IE 也有

::-ms-fill-lower 和 ::-ms-fill-upper

在拇指的左右两侧应用不同的样式。这是我的代码

  input[type=range] {
    width: 100%;
    margin: 3px 0;
    background-color: transparent;
    -webkit-appearance: none;
  }
  input[type=range]:focus {
    outline: none;
  }
  input[type=range]::-webkit-slider-runnable-track {
    background: #0075b0;
    border: 0;
    width: 100%;
    height: 6px;
    cursor: pointer;
    border-radius: 3px
  }
  input[type=range]::-webkit-slider-thumb {
    margin-top: -8px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 5px solid #0075b0;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
  }
  input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #ffffff;
    border: 5px solid #0075b0;
    border-radius: 50%;
    cursor: pointer;
  }
  input[type=range]::-moz-range-track {
    background-color: #F4F4F4;
    border: 0;
    width: 100%;
    height: 6px;
    cursor: pointer;
    border-radius: 3px
  }
  input[type="range"]::-moz-range-progress {
    background-color: #0075b0; 
    height: 6px;
    border-radius: 3px
  }
  input[type="range"]::-ms-thumb {
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 3px solid #0075b0;
    border-radius: 50%;
    cursor: pointer;
    margin-top: 0px;
    /*Needed to keep the Edge thumb centred*/
  }
  input[type="range"]::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 4px 0;
    color: transparent;
    width: 100%;
    height: 6px;
    cursor: pointer;
    border-radius: 3px
  }
  input[type="range"]::-ms-fill-lower {
    background-color: #0075b0;
    border: 0;
    border-radius: 3px
  }
  input[type="range"]::-ms-fill-upper {
    background-color: #F4F4F4;
    border: 0;
    border-radius: 3px
  }
  input[type="range"]:focus::-ms-fill-lower {
    background-color: #0075b0;
    border-radius: 3px
  }
  input[type="range"]:focus::-ms-fill-upper {
    background-color: #F4F4F4;
    border-radius: 3px
  }
  @supports (-ms-ime-align:auto) {
    input[type=range] {
      margin: 0;
    }
  }

<input type="range">

标签： javascripthtmlcssfrontend