css - 为输入范围的一部分着色

Question

您好，我有一个 html5 最小 0 和最大 100 的输入范围。但是我想给一个部分上色，例如 70 到 100 之间。我不想为此使用 Bootstrap 。我不知道该怎么做。

Answer 1

您可以通过使用 linear-gradient 作为轨道背景轻松地做到这一点。我们需要做的就是创建一个仅根据我们需要的宽度着色的渐变(对于您的情况为 30%，因为您只需要在 70-100 之间着色)，然后相对于轨道(轨道是范围输入的栏)右侧。由于范围输入的样式仍处于实验阶段，我们必须使用浏览器前缀选择器(选择每个浏览器的轨道)，然后对其应用样式。我们还必须做一些额外的更正来解决浏览器特定的问题，我在代码中用内联注释标记了这些。

以下代码经过测试，发现在 Edge、IE11 和最新版本的 Chrome、Firefox 和 Opera(均在 Windows 10 机器上)中运行良好。

注意:这只会对范围输入的 70-100 之间的部分进行不同的着色。这没有使范围输入的外观在所有浏览器中都相同的代码。我没有这样做，因为这超出了这个问题的范围。

此外，as mentioned by ssc-hrep3 in his comment ，这可能不利于生产实现，因为这些东西仍处于实验阶段，我们必须使用特定于浏览器的选择器，但如果您想将自定义样式应用于 HTML5 范围输入，则可能没有其他方法。

input[type=range] {
  -webkit-appearance: none;
  border: 1px solid black;  /* just for demo */
}
input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(to left, red 30%, transparent 30%);
  background-position: right top;
}
input[type=range]::-moz-range-track {
  background: linear-gradient(to left, red 30%, transparent 30%);
  background-position: right top;
}
input[type=range]::-ms-track {
  background: linear-gradient(to left, red 30%, transparent 30%);
  background-position: right top;
  background-repeat: no-repeat;  /* no repeat means background appears a little on the left due to width issue and hence the fix */
  width: 100%;  /* to fix width issue in Edge */
  color: transparent;  /* to avoid the intermediate stripe lines in < IE11 */
  border: none;  /* just do away with the track's border */
}
input[type=range]::-ms-fill-lower {
  background: transparent; /* IE11 has default fill and that needs to be removed */
}

<input type="range" min="0" max="100" value="70" step="10" />

---

为了 future 读者的利益:如果您需要在所有主要浏览器中使用统一的样式，那么您可以使用以下代码段。它在所有这些中产生几乎相似的输出。

input[type=range] {
  -webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(to left, red 30%, transparent 30%);
  background-position: right top;
  height: 10px;
  box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-moz-range-track {
  background: linear-gradient(to left, red 30%, transparent 30%);
  background-position: right top;
  height: 10px;
  box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-ms-track {
  background: linear-gradient(to left, red 30%, transparent 30%);
  background-position: right top;
  background-repeat: no-repeat;  /* no repeat means background appears a little on the left due to width issue and hence the fix */
  width: 100%;  /* to fix width issue in Edge */
  height: 10px;
  color: transparent;  /* to avoid the intermediate stripe lines in < IE11 */
  border-color: transparent;
  border-style: solid;
  border-width: 10px 0px; /* dummy just to increase height, otherwise thumb gets hidden */
  box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-ms-fill-lower {
  background: transparent; /* IE11 has default fill and that needs to be removed */
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  margin-top: -4px;
  background: sandybrown;
  border: 1px solid chocolate;
  border-radius: 50%;
}
input[type=range]::-moz-range-thumb {
  height: 18px;
  width: 18px;
  background: sandybrown;
  border: 1px solid chocolate;
  border-radius: 50%;
}
input[type=range]::-ms-thumb {
  height: 18px;
  width: 18px;
  margin-top: 0px; /* nullify default margin */
  background: sandybrown;
  border: 1px solid chocolate;
  border-radius: 50%;
}

<input type="range" min="0" max="100" value="70" step="10" />