输入范围样式 IE11/Firefox 与 Chrome 相同
Posted
技术标签:
【中文标题】输入范围样式 IE11/Firefox 与 Chrome 相同【英文标题】：input range styling IE11/Firefox same as Chrome 【发布时间】：2020-01-12 13:28:36 【问题描述】：我在 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
【问题讨论】：
【参考方案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
此外，您可以尝试根据自己的要求对其进行修改，或者将其用作在自己的代码中进行更改的参考。
【讨论】：
谢谢。。我已经更新了我的代码，但仍然无法让滑块正确地坐在框架中并且是透明的，因此背景显示为文本“Nm”。需要和顶部开关的格式一样 这是它在所有浏览器上的样子 - wp1.cajsoft.co.uk/wp-content/uploads/capture.png"> 我已经告诉过你，每个浏览器都以自己的方式工作。因此，要获得相似的外观将非常复杂。如果可能的话，您可以尝试保持简单的设计，以便在不同浏览器之间以最小的差异显示。以上是关于输入范围样式 IE11/Firefox 与 Chrome 相同的主要内容，如果未能解决你的问题，请参考以下文章