ios 滑块控件设置样式_如何跨多个浏览器设置HTML5范围滑块的样式

最新推荐文章于 2021-06-19 13:02:20 发布

cune1359

最新推荐文章于 2021-06-19 13:02:20 发布

阅读量226

点赞数

文章标签： python java css html html5

范围是HTML5中引入的新输入类型之一。此输入类型允许一个人输入指定范围内的数字。浏览器会将本机输入类型呈现为滑块控件 。这是我们通常在App中找到的非常直观的用户界面。我们可以向右或向左滑动把手，以产生该范围内的数字。

但是正如您在上面看到的那样，每个浏览器以略有不同的口味显示此输入类型，某些设计人员可能不太满意。因此，在本文中，我们将向您展示如何以更统一的设计形式设置样式 。如果您准备好了，那就开始吧。

在Chrome，Safari和Opera中

Safari和Opera是基于Webkit的浏览器。尽管Chrome决定采用自己的引擎Blink，但暂时看来，Chrome仍然从网站继承了多个代码库。

Webkit提供了一种简便的方式来设置任何输入类型的样式，包括range 。首先，我们可以使用属性选择器选择输入，并通过将-webkit-appearance设置为none来删除本地Webkit / Chrome样式。

input[type=range] {
	-webkit-appearance: none
}

从这一阶段开始，我们可以添加任何内容，例如边框，背景色，更圆的边框等。

.input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	border-radius: 8px;
	height: 7px;
	border: 1px solid #bdc3c7;
	background-color: #fff; 
}

如下所示，句柄栏是输入中唯一不受上述代码影响的剩余部分。

要对其应用样式，我们必须使用Webkit专有的伪元素选择器::-webkit-slider-thumb并且类似地使用-webkit-appearance删除本机样式，如下所示。

input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	background-color: #ecf0f1;
	border: 1px solid #bdc3c7;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	cursor: pointer;
}

这就是我们在Webkit浏览器中设置输入类型范围样式的方式。我们上面添加的样式应在Chrome，Safari和最新版本的Opera上生效。但是，由于它们运行不同的引擎，因此不会影响Firefox和Internet Explorer。但是我们有针对这两个的解决方法。

在Firefox中

直接使用属性选择器input[type='range']添加样式不会更改Firefox中输入的本机样式。相反，我们必须使用Firefox专有的伪元素选择器::-moz-range-track和::-moz-range-thumb 。

.firefox input[type=range]::-moz-range-track {
	border-radius: 8px;
	height: 7px;
	border: 1px solid #bdc3c7;
	background-color: #fff;
}
.firefox input[type=range]::-moz-range-thumb {
	background: #ecf0f1;
	border: 1px solid #bdc3c7;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	cursor: pointer;
}

我们应用完全相同的样式。打开Firefox，您应该像在Webkit浏览器中那样获得接近的结果。

在Internet Explorer中

Internet Explorer显示的输入类型范围与其余的有很大不同。为了简化起见，在这里我绘制了一个图表，显示构成输入的部分。

当我们滑过车把时，IE还将显示一个工具提示，显示您的号码。

可以使用IE专有的伪元素::-ms-fill-lower ， ::-ms-fill-upper ， ::-ms-thumb ， ::-ms-ticks和::-ms-tooltip来设置每个输入部分的样式::-ms-tooltip 。在这里，我们还将应用与Webkit和Firefox中相同的样式。

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
	background: transparent;
}
input[type="range"]::-ms-track {
    border-radius: 8px;
	height: 7px;
	border: 1px solid #bdc3c7;
	background-color: #fff;
}
input[type="range"]::-ms-thumb {
	background-color: #ecf0f1;
	border: 1px solid #bdc3c7;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	cursor: pointer;
}

但是输出不是我们期望的。 刻度线是可见的，而把手的顶部和底部则是隐藏的。

我们可以通过在输入元素中添加step="any"来轻松删除刻度线 。但是，使车把完全可见是不可能的。好像输入元素的overflow设置为hidden ，但仅通过将overflow设置为visible不能撤消。这是我仍在尝试解决的问题。如果您已解决此问题，则可以在下面的评论框中共享它。