type="range" HTML 输入的刻度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26612700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ticks for type="range" HTML input
提问by Joel DeWitt
回答by Woodrow Barlow
Input ranges are still a bit of a nightmarish hack when it comes to styling. That said, displaying tickmarks on major browsers ispossible, with a bit of elbow grease and browser-specific solutions.
在样式方面，输入范围仍然是一个噩梦般的黑客。也就是说，在主要浏览器上显示刻度线是可能的，需要一些肘部润滑脂和特定于浏览器的解决方案。
Internet Explorer / Edge
Internet Explorer / 边缘
As you seem to be aware, Internet Explorer will show ticks by default if you add the HTML stepattribute. In a weird twist of events, Internet Explorer and Edge are arguably the most flexible browser when it comes to styling input ranges.
您似乎知道，如果您添加 HTMLstep属性，Internet Explorer 将默认显示刻度。在一个奇怪的事件中，Internet Explorer 和 Edge 在样式化输入范围方面可以说是最灵活的浏览器。
<input type="range" min="0" max="100" step="25">Chrome / Safari
铬 / Safari
In Chrome and other Webkit browsers (including Safari), you can use the datalist element to provide a custom set of tick locations on the slider. While all major browsers support this element, Firefox (and other Gecko browsers) won't show visible tick marks.
在 Chrome 和其他 Webkit 浏览器（包括 Safari）中，您可以使用 datalist 元素在滑块上提供一组自定义的刻度位置。虽然所有主要浏览器都支持此元素，但 Firefox（和其他 Gecko 浏览器）不会显示可见的刻度线。
<input type="range" min="0" max="100" step="25" list="steplist">
<datalist id="steplist">
<option>0</option>
<option>25</option>
<option>50</option>
<option>75</option>
<option>100</option>
</datalist>Firefox
火狐
In Firefox and other Gecko-based browsers, we'll need to use some vendor-specific CSS to add the tick marks. You'll have to customize this to whatever looks the most natural to you. In this example, I've used a horizontal repeating gradient to add "vertical stripes" that look like tick marks, but you could also use a background image, or any other style you want. You could even use a bit of Javascript to load information from the datalist element, then generate an appropriate gradient and apply it to the element so that it all happens automatically, and so it can support custom arbitrary stops.
在 Firefox 和其他基于 Gecko 的浏览器中，我们需要使用一些特定于供应商的 CSS 来添加刻度线。您必须将其自定义为您认为最自然的任何内容。在这个例子中，我使用了一个水平重复渐变来添加看起来像刻度线的“垂直条纹”，但你也可以使用背景图像或任何其他你想要的样式。您甚至可以使用一些 Javascript 从 datalist 元素加载信息，然后生成适当的渐变并将其应用到元素，以便这一切自动发生，因此它可以支持自定义的任意停止。
input[type="range"]::-moz-range-track {
padding: 0 10px;
background: repeating-linear-gradient(to right,
#ccc,
#ccc 10%,
#000 10%,
#000 11%,
#ccc 11%,
#ccc 20%);
}<input type="range" min="0" max="100" step="25" list="steplist">
<datalist id="steplist">
<option>0</option>
<option>25</option>
<option>50</option>
<option>75</option>
<option>100</option>
</datalist>Compatibility notes: As pointed out in the comments, datalist is not supported by some browsers. Depending on how those browsers handle unsupported / unrecognized elements, this may result in the browsers displaying the option values as plain text below your range input. If targeting the widest possible range of browsers is important to you, this may be a problem.
兼容性说明：正如评论中所指出的，某些浏览器不支持datalist 。根据这些浏览器处理不受支持/无法识别的元素的方式，这可能会导致浏览器将选项值显示为范围输入下方的纯文本。如果针对尽可能广泛的浏览器对您很重要，这可能是一个问题。
One solution is to use the awkward repeating-linear-gradientkludge for webkit browsers in addition to gecko browsers, and then remove the datalist entirely.
一种解决方案是repeating-linear-gradient在 gecko 浏览器之外使用webkit 浏览器的笨拙kludge，然后完全删除数据列表。
Another solution would be to use CSS to explicitly set the datalist to display: none. This solution is probably the most preferable, as you aren't compromising features to provide legacy support.
另一种解决方案是使用 CSS 将 datalist 显式设置为display: none. 此解决方案可能是最可取的，因为您不会为了提供传统支持而牺牲功能。
回答by user10452457
I hope, this will help somebody formating the tick and datalist under FF. Requires the options to be evenly spaced and input + datalist have to have the same width.
我希望，这将有助于在 FF 下格式化刻度和数据列表的人。要求选项均匀分布，并且 input + datalist 必须具有相同的宽度。
input[type="range"] {
width: 100%;
margin: 0;
box-sizing: border-box;
}
datalist {
display: flex;
width: 100%;
justify-content: space-between;
margin-top: -23px;
padding-top: 0px;
}
option {
width: 2ex;
display: flex;
justify-content: center;
height: 42px;
align-items: end;
background-image: url(tick.png);
height: 4ex;
background-position-y: -15px;
background-position-x: center;
z-index: -1;
}
回答by j08691
You can use the <datalist>with the range:
您可以将<datalist>与范围一起使用：
<input type="range" min="0" value="0" max="10" step="1" list="ticks">
<datalist id="ticks">
<option>0</option>
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
<option>10</option>
</datalist>