解决方法
输入范围在造型方面仍然是一场噩梦.也就是说,在主要浏览器上显示标记是可能的,有一点弯头润滑脂和浏览器特定的解决方案.
IE浏览器
您似乎知道,如果添加HTML步骤属性,Internet Explorer将默认显示tick.在一个奇怪的事件,Internet Explorer可以说是最灵活的浏览器,当涉及到造型输入范围.
<input type="range" min="0" max="100" step="25">
Chrome / Safari
在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和其他基于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>
兼容性注释：如评论中所指出的,datalist is not supported by some browsers.根据这些浏览器如何处理不受支持/无法识别的元素,这可能导致浏览器将选项值显示为范围输入下的纯文本.如果定位到尽可能广泛的浏览器对您来说很重要,这可能是一个问题.
