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

Question

我想在我的网站上设置两个不同范围的样式。第一个我已经定型了。问题在于第二个。我希望第二个范围的样式与第一个不同。

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

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

现在，第二个范围继续采用第一个范围的 css 样式，所以我最终得到两个蓝色范围。我试过使用不同的输入类型（input[type=range]、input[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/。我不喜欢，但你一定可以做到！

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

How to style different input ranges on the same site

html

css

range