Question

我正在尝试在我的网站上设置两个不同的范围。我已经设计过的第一个。问题出在第二个问题上。我希望第二个范围的样式与第一个范围不同。

这是我的意思的一个例子：

范围1：蓝色背景
范围2：绿色背景

现在，第二个范围保持第一个范围的CSS样式，所以我最终得到两个蓝色范围。我尝试使用不同的输入类型（输入[type = range]，输入[type = range2]），但它不起作用。我已经看过页面这样做，所以我很确定它是可能的。我是否必须使用多个样式表，还是可以使用自定义输入类型？我认为这可以通过自定义输入类型完成，在这种情况下，我可能做错了。

Answer 1

我认为你想要设计范围。首先，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/。我不喜欢它，但你肯定能做到！

如何在同一站点上设置不同输入范围的样式

1 个答案: