您好我在html5 min 0和max 100上有输入范围。 但我想为一部分着色,例如70到100之间。 我不想为此使用bootstrap。 我不知道该怎么做。
答案 0 :(得分:3)
您可以使用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" />