输入范围样式 IE11/Firefox 与 Chrome 相同

Question

我有一个样式为 Chrome 的范围滑块。我在尝试让它在 IE11 和 Firefox 中看起来相同时遇到了重大问题。我已经尝试按照一些关于如何制作的指南进行操作它兼容使用 ms- 和 moz- 作为 webkit 标签，但它的格式仍然不同。我知道它可能有点不同，但它与相同的结果相去甚远。这是到目前为止的代码。基本上，范围滑块的格式需要与其上方的按钮相同……非常感谢任何帮助。

.switch {
 position: relative;
 display: block;
 vertical-align: top;
 width: 100px;
 height: 30px;
 padding: 3px;
 margin: 0 10px 10px 0;
 background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
 background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
 border-radius: 18px;
 box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
 cursor: pointer;
 box-sizing:content-box;
}
.switch-input {
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 box-sizing:content-box;
}
.switch-label {
 position: relative;
 display: block;
 height: inherit;
 font-size: 10px;
 text-transform: uppercase;
 background: #eceeef;
 border-radius: inherit;
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
 box-sizing:content-box;
}
.switch-label_1 {
 position: relative;
 display: block;
 height: inherit;
 font-size: 10px;
 text-transform: uppercase;
 background: #eceeef;
 border-radius: inherit;
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
 box-sizing:content-box;
}
.switch-label:before, .switch-label:after, .switch-label_1:before, .switch-label_1:after {
 position: absolute;
 top: 50%;
 margin-top: -.5em;
 line-height: 1;
 -webkit-transition: inherit;
 -moz-transition: inherit;
 -o-transition: inherit;
 transition: inherit;
 box-sizing:content-box;
}
.switch-label:before, .switch-label_1:before {
 content: attr(data-off);
 right: 11px;
 color: #aaaaaa;
 text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after, .switch-label_1:after {
 content: attr(data-on);
 left: 11px;
 color: #FFFFFF;
 text-shadow: 0 1px rgba(0, 0, 0, 0.2);
 opacity: 0;
}
.switch-input:checked ~ .switch-label {
 background: #86b692;
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
 opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
 opacity: 1;
}

.switch-input:checked ~ .switch-label_1 {
 background: #a9d2d5;
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label_1:before {
 opacity: 0;
}
.switch-input:checked ~ .switch-label_1:after {
 opacity: 1;
}

.switch-handle {
 position: absolute;
 top: 4px;
 left: 4px;
 width: 28px;
 height: 28px;
 background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
 background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
 border-radius: 100%;
 box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -6px 0 0 -6px;
 width: 12px;
 height: 12px;
 background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
 background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
 border-radius: 6px;
 box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
 left: 74px;
 box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
 
/* Transition
========================== */
.switch-label, .switch-label_1, .switch-handle {
 transition: All 0.3s ease;
 -webkit-transition: All 0.3s ease;
 -moz-transition: All 0.3s ease;
 -o-transition: All 0.3s ease;
}

.range {
   display: block;
 vertical-align: top;
 width: 300px;
 height: 30px;
 padding: 3px;
 margin: 0 10px 10px 0;
 background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
 background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
 border-radius: 18px;
 box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
 cursor: pointer;
 box-sizing:content-box;
}

.range-frame{
 position: relative;
 display: block;
 height: inherit;
 font-size: 10px;
 background: #eceeef;
 border-radius: inherit;
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
 box-sizing:content-box;
}



input[type=range] {
  -webkit-appearance: none;
    margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 35px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: lightgray;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 35px;
  width: 39px;
  border-radius: 35px;
  background: silver;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -1px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: lightgray;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 35px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: lightgray;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 35px;
  width: 39px;
  border-radius: 35px;
  background: silver;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 35px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: lightgray;
  border: 0px solid #000101;
  border-radius: 35px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: transparent;
  border: 0px solid #000101;
   border-radius: 35px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 35px;
  width: 39px;
  border-radius: 35px;
  background: silver;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: lightgray;
}
input[type=range]:focus::-ms-fill-upper {
  background:lightgray;
}


.output-value{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: #aaaaaa;
  pointer-events: none;
  
}

<html>
 <head>
 
  <title>Roland</title>
  <link rel="stylesheet" href="range.css" />
  <link rel="stylesheet" href="switch.css">
 </head>
 <body>
  <form>
   <label class="switch">
    <input class="switch-input" type="checkbox"  Filter="PL" Column="1">
    <span class="switch-label" data-on="PL" data-off="PL"></span> 
    <span class="switch-handle"></span> 
   </label>


   <label class="range">
    <span class="range-frame">
     <span for fader class="output-value" id="rangevalue">0 Nm</span>
     <input class="range-input" id="fader" type="range" min="0" max="150" step="1" value="0" onchange="outputUpdate(value)">
       </span>
   </label>
  </form>
  <script>
            function outputUpdate(vol) {
            document.getElementById('rangevalue').innerHTML=vol + ' Nm';
            }
        </script>
 </body>
</html>

这是它在所有浏览器上的样子 -

谢谢 C

Answer 1

输入类型范围可自定义。不幸的是，每个浏览器都有自己的方式，因此我们必须编写比预期更长的代码。你也不会得到完全相似的结果。结果看起来与其他浏览器略有不同。

您可以参考下面的示例，我尝试对其进行自定义以使其看起来像您的范围滑块。我用各种浏览器对其进行了测试，它在大多数浏览器中看起来几乎相似。

<!DOCTYPE html>
<html>
<head>
<style>
input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 35px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: lightgray;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 35px;
  width: 39px;
  border-radius: 35px;
  background: silver;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -1px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: lightgray;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 35px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: lightgray;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 35px;
  width: 39px;
  border-radius: 35px;
  background: silver;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 35px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: lightgray;
  border: 0px solid #000101;
  border-radius: 35px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: lightgray;
  border: 0px solid #000101;
   border-radius: 35px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 35px;
  width: 39px;
  border-radius: 35px;
  background: silver;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: lightgray;
}
input[type=range]:focus::-ms-fill-upper {
  background:lightgray;
}

body {
  padding: 30px;
}

</style>
</head>
<body>

<input type="range">


</body>
</html>

在各种浏览器中的输出：

参考：

(1) Codepen example

(2) Styling Cross-Browser Compatible Range Inputs with CSS

另外，您可以根据自己的需要尝试修改，或者作为自己代码修改的参考。

输入范围样式 IE11/Firefox 与 Chrome 相同

input range styling IE11/Firefox same as Chrome

css

firefox

internet-explorer

google-chrome

cross-browser