看完之后this http://css-tricks.com/datalists-different-input-types/我想知道是否可以在 Chrome 和 Firefox 中显示刻度type="range"输入号码？我能找到的关于这个主题的最接近的东西是this https://stackoverflow.com/questions/15935681/showing-tick-marks-on-inputtype-range.
在样式方面，输入范围仍然是一个噩梦般的黑客。也就是说，在主要浏览器上显示刻度线is可能，需要一点苦力和特定于浏览器的解决方案。
互联网浏览器/边缘
正如您所知，如果您添加 HTML，Internet Explorer 将默认显示勾号step属性。奇怪的是，在输入范围样式方面，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
在 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部分浏览器不支持 http://caniuse.com/#feat=datalist。根据这些浏览器处理不受支持/无法识别的元素的方式，这可能会导致浏览器在范围输入下方将选项值显示为纯文本。如果针对尽可能广泛的浏览器对您来说很重要，那么这可能是一个问题。
一种解决方案是使用尴尬的repeating-linear-gradient除了 gecko 浏览器之外，还可以对 webkit 浏览器进行 kludge，然后完全删除 datalist。
另一个解决方案是使用 CSS 显式地将 datalist 设置为display: none。该解决方案可能是最可取的，因为您不会为了提供遗留支持而牺牲功能。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
