我正在尝试在我的网站上设置两个不同的范围。我已经设计过的第一个。问题出在第二个问题上。我希望第二个范围的样式与第一个范围不同。
这是我的意思的一个例子:
现在,第二个范围保持第一个范围的CSS样式,所以我最终得到两个蓝色范围。我尝试使用不同的输入类型(输入[type = range],输入[type = range2]),但它不起作用。我已经看过页面这样做,所以我很确定它是可能的。我是否必须使用多个样式表,还是可以使用自定义输入类型?我认为这可以通过自定义输入类型完成,在这种情况下,我可能做错了。
答案 0 :(得分:0)
我认为你想要设计范围。首先,input[type="range"]
只能以这种方式编写,并且只能使用范围,而不是更具体。
你想要背景吗?他们在这里:
HTML
<input type="range" id="green">
<input type="range" id="blue">
CSS(它变得艰难)
#green::-webkit-slider-runnable-track {
background-color: green;
}
#green::-moz-range-track {
background-color: green;
}
#green::-ms-track, #green::-ms-fill-lower {
background-color: green;
}
#blue::-webkit-slider-runnable-track {
background-color: blue;
}
#blue::-moz-range-track {
background-color: blue;
}
#blue::-ms-track, #blue::-ms-fill-lower {
background-color: blue;
}
你可能会为此徘徊这么多?样式范围仍然不太受支持。
但是嘿!如果您还想了解更多信息,请转到https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/。我不喜欢它,但你肯定能做到!