类型的节拍=“范围”HTML输入-Ticksfortype=“range”HTMLinput

34  

Input ranges are still a bit of a nightmarish hack when it comes to styling. That said, displaying tickmarks on major browsers is possible, with a bit of elbow grease and browser-specific solutions.

当涉及到样式时，输入范围仍然有点像噩梦。也就是说，在主要的浏览器上显示tickmarks是可能的，只要花点功夫和特定于浏览器的解决方案就可以了。

Internet Explorer / Edge

ie /边

As you seem to be aware, Internet Explorer will show ticks by default if you add the HTML step attribute. In a weird twist of events, Internet Explorer and Edge are arguably the most flexible browser when it comes to styling input ranges.

如您所知，如果您添加了HTML step属性，Internet Explorer将在默认情况下显示节拍。奇怪的是，Internet Explorer和Edge在样式输入范围方面可以说是最灵活的浏览器。

Chrome / Safari

Chrome或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浏览器)不会显示可见的标记。

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和其他基于geck的浏览器中，我们需要使用一些特定于供应商的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%);
}

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-gradient kludge for webkit browsers in addition to gecko browsers, and then remove the datalist entirely.

一种解决方案是除了gecko浏览器外，对webkit浏览器使用令人尴尬的重复线性渐变拼凑器，然后完全删除数据主义者。

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: none。这种解决方案可能是最可取的，因为您不需要牺牲特性来提供遗留支持。

3  

You can use the with the range:

您可以使用