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

【问题标题】：input range styling IE11/Firefox same as Chrome输入范围样式 IE11/Firefox 与 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

【问题讨论】：

    标签： css google-chrome internet-explorer firefox cross-browser


    【解决方案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">
    • 我已经告诉过你，每个浏览器都以自己的方式工作。因此，要获得相似的外观将非常复杂。如果可能的话，您可以尝试保持简单的设计，以便在不同浏览器之间以最小的差异显示。
    猜你喜欢
    • 2015-04-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode