Question

您好我在html5 min 0和max 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" />

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

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" />

为输入范围的一部分着色

1 个答案: