当涉及到样式时，输入范围仍然有些噩梦。这就是说，在各大浏览器中显示刻度线 是 可能的，有点苦劳和浏览器的特定解决方案。
Internet Explorer / Edge
如您所知，默认情况下，如果添加HTML
step属性，Internet Explorer将显示刻度。在各种奇怪的事件中，Internet
Explorer和Edge可以说是设置输入范围样式时最灵活的浏览器。
<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>兼容性说明：如注释中所述，某些浏览器不支持数据列表。根据这些浏览器处理不受支持/无法识别的元素的方式，这可能会导致浏览器在范围输入下方以纯文本形式显示选项值。如果定位到尽可能广泛的浏览器对您很重要，那么这可能是个问题。
一种解决方案是
repeating-linear-gradient，除了使用壁虎浏览器之外，还对Webkit浏览器使用笨拙的合并，然后完全删除数据列表。
另一种解决方案是使用CSS将数据列表显式设置为
display: none。该解决方案可能是最可取的，因为您不会损害提供旧版支持的功能。
